Javascript中具有相同ID的多個元素
[英]Multiple elements with same Id in Javascript
問題描述
我有一個html文件包含具有相同ID名稱的多個元素的情況。
表行包含5列，其中我需要考慮2,3,4,5列數據。
<tr id='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
我在文件中的多個位置都有以上代碼。 我需要使用javascript添加相應的值。
5 個解決方案
解決方案1
2 2014-03-12 04:40:39
ID在html頁面中是唯一的。 您也可以在頁面上將其稱為THE ID 。 同一頁中的兩個不同標簽不能具有相同的ID 。 但是您可以使用class而不是and ID 。 在這里知道
所以你的HTML可以像
<tr class='total_row'>
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
以jquery為例，您可以執行以下操作：
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
<tr class="one">
<td></td>
<td></td>
</tr>
</table>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$(".one").eq(0).find('td').eq(0).html("I'm tracked");
// get 1st tr and get first td
$(".one").eq(1).find('td').eq(1).html("I'm tracked");
// get 2nd tr and get second td
$(".one").eq(2).find('td').eq(0).html("I'm tracked");
// get 3rd tr and get first td
});
</script>
</body>
</html>
但是我想這種方法可能很乏味。
解決方案2
1 2014-03-12 04:39:46
ID應該是唯一的，如果您使用相同的ID，則javascript代碼僅引用第一個元素。 但是，如果您仍然想使用相同的ID，則可以嘗試以下代碼：
$(function(){
$('[id="total_row"]').each(function(){//run for every element having 'total_row' id
var $this = $(this);
$this.find('td').eq(1).text() //to get second column data
$this.find('td').eq(1).text('dummy text') //to set second column data
});
});
解決方案3
0 2014-03-12 04:45:19
您可以使用XHTML：
<p id="foo" xml:id="bar">
通過XHTML，您可以將相似的ID應用於多個控件。
在這里可以找到類似的問題：
解決方案4
0 2014-03-12 04:52:19
雖然重復的ID無效，但是可以容忍它們並且可以解決。 當使用document.getElementById時，它們實際上只是一個問題。
我猜桌子看起來像：
<table id="t0">
<tr>
<td>-<th>count<th>Pass<td>Fail<td>Error<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
<tr>
<td>-<td>1<td>1<td>0<td>0<td>
<tr>
<td>-<td>1<td><td>1<td>0<td>
<tr>
<td>-<td>1<td><td>0<td>1<td>
<tr id='total_row'>
<td>Total<td><td><td><td><td>
</table>
<button onclick="calcTotals();">Calc totals</button>
如果是正確的話，那么添加每個子節的函數可以像這樣：
function calcTotals(){
var table = document.getElementById('t0');
var rows = table.rows;
var row, totals = [0,0,0,0];
// For every row in the table (skipping the header row)
for (var i=1, iLen=rows.length; i<iLen; i++) {
row = rows[i];
// If it's a total row, write the totals and
// reset the totals array
if (row.id == 'total_row') {
for (var j=0, jLen=totals.length; j<jLen; j++) {
row.cells[j+1].innerHTML = totals[j];
totals[j] = 0;
}
// Otherwise, add values to the totals
} else {
for (var k=0, kLen=totals.length; k<kLen; k++) {
totals[k] += parseInt(row.cells[k + 1].innerHTML) || 0;
}
}
}
}
解決方案5
0 2014-03-12 05:11:27
除了使用有效的類（對我來說有點討厭）之外，還可以使用data-*屬性。
<tr class='total_row' data-val-row-type="totals-row">
<td>Total</td>
<td>%(count)s</td>
<td>%(Pass)s</td>
<td>%(fail)s</td>
<td>%(error)s</td>
<td> </td>
</tr>
然后，在您的腳本中（jQuery語法-querySelectorAll具有類似的語法）
var $totalsRows = $("[data-val-row-type='totals-row']);
當您與一個單獨的UI設計師一起工作時，這可以防止UI專家退出並更改類名以修復新的設計布局，並且很清楚您正在使用此值來標識行，而不僅僅是樣式化。
JavaScript 和 getElementById 用於具有相同 ID 的多個元素
[英]JavaScript and getElementById for multiple elements with the same ID
在多個位置使用javascript更改CSS元素以獲取相同的元素ID
[英]changing CSS elements with javascript for same element id in multiple places
JavaScript-通過一個復選框隱藏多個具有相同ID的元素
[英]JavaScript - Hide multiple elements(with same id) with one checkbox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.