Question

我正在寻找一种方法来改变同一个id的类。我有一个包含多行和一些父子'行'的表。因此，当点击父母时，孩子的班级也必须改变。我有以下代码：

function FormTRClick(event, ctrl) {
   if (event.target.tagName == 'TD') {
       if (document.getElementById('chk' + ctrl).checked == true) {
           document.getElementById('chk' + ctrl).checked = false;
           document.getElementById('row' + ctrl).className = "invoice-tr-standard";
       } else {
           document.getElementById('chk' + ctrl).checked = true;
           document.getElementById('row' + ctrl).className = "invoice-tr-clicked";
       }
   }
}

此脚本由以下人员调用：<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')">并且每个父母都有一个新ID（因此父+子女带有相同的ID）。

我该怎么做？我是否必须将元素放入一个数组中然后循环它们以给它们正确的类名？或者还有其他任何方式吗？

感谢。

更新

我有一张表，有多行。我喜欢这样：

row1 Parent
  row1 Child
  row1 Child
row2 Parent
  row2 Child
row3 Parent
row4 Parent
  row4 Child

我希望className 所有 row1（或者row2，取决于点击了哪一个）在点击{{1时}时更改为invoice-tr-clicked如上所示。

因此，当点击“父”时，“子”行（因为它们共享相同的ID）必须根据其当前样式将其类名更改为<tr>或invoice-tr-clicked。< / p>

来自页面的HTML代码

invoice-tr-standard

Answer 1

这似乎是一个常见的错误，但id属性必须始终是唯一的。不能有两个具有相同id值的元素。如果您在多个元素上使用相同的ID，则无法保证可以正常工作。

来自：http://reference.sitepoint.com/html/core-attributes/id

id属性最重要的方面是它必须是绝对独特。与class属性不同，它可能适用于与页面中的许多元素相同的值，即应用于的一个id element必须与同一页面上任何其他位置使用的id不匹配。

我知道这并没有真正回答你的问题，但我不明白你的问题是什么，它可能完全基于HTML的错误使用。

Answer 2

为您的行添加两部分唯一ID，如下所示：

row1_1 Parent
  row1_2 Child
  row1_3 Child
row2_1 Parent
  row2_2 Child
row3_1 Parent
row4_1 Parent
  row4_2 Child

并将代码的类开关部分更改为：

var i = 1;
var element;
while( ( element = document.getElementById( 'chk' + ctrl + '_' + i ) ) !== null ) {
    if (element.checked == true) {
       element.checked = false;
       element.className = "invoice-tr-standard";
    } else {
       element.checked = true;
       element.className = "invoice-tr-clicked";
    }
    ++i;
}

更改相同ID的类

2 个答案: