Question

我有一个案例，其中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>&nbsp;</td>
</tr>

我在文件的几个地方有上面的代码。我需要使用javascript添加相应的值。

Answer 1

ID在html页面中是唯一的。您可以将其称为THE ID以及页面。对于单个页面中的两个不同标记，您不能使用相同的ID。但您可以使用class代替和ID。了解它here

所以你的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>&nbsp;</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>

但我想这种做法可能很乏味。

Answer 2

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
   });
});

Answer 3

您可以使用XHTML：

<p id="foo" xml:id="bar">

通过XHTML，您可以将类似的ID应用于多个控件。

类似的问题可以在这里找到：

http://www.c-sharpcorner.com/Forums/

Answer 4

虽然重复的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>&nbsp;
  <tr>
    <td>-<td>1<td>1<td>0<td>0<td>&nbsp;
  <tr id='total_row'>
    <td>Total<td><td><td><td><td>
  <tr>
    <td>-<td>1<td>1<td>0<td>0<td>&nbsp;
  <tr>
    <td>-<td>1<td><td>1<td>0<td>&nbsp;
  <tr>
    <td>-<td>1<td><td>0<td>1<td>&nbsp;
  <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;
      }
    }
  }
}

Answer 5

除了使用有效但对我来说有点蠢的类之外，还可以使用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>&nbsp;</td>
</tr>

然后，在您的脚本中（jQuery语法 - querySelectorAll具有类似的语法）

var $totalsRows = $("[data-val-row-type='totals-row']);

当你在一个拥有单独的UI设计师的团队中时，这会阻止UI人员拆除并更改你的类名以修复新的设计布局，这使得你很清楚你使用这个值来识别行，而不仅仅是风格。

Javascript中具有相同Id的多个元素

5 个答案: