Fatal编程技术网

Javascript 更改相同id的类

javascript html

Javascript 更改相同id的类,javascript,html,Javascript,Html,我正在寻找一种方法来更改相同id的类。我有一个包含多行和一些父子“行”的表。因此，当单击父对象时，子对象的类也必须更改。我有以下代码： function FormTRClick(event, ctrl) { if (event.target.tagName == 'TD') { if (document.getElementById('chk' + ctrl).checked == true) { document.getElementById('chk

我正在寻找一种方法来更改相同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";
       }
   }
}
此脚本由以下函数调用：
，每个父级都有一个新ID（因此父级+子级携带相同的ID）

我该怎么做？我是否必须将元素放入一个数组中，然后循环遍历它们以获得正确的类名？还是有其他方法可以做到这一点

谢谢

更新

<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td><input type='checkbox' name='strFormFactuur[]' value='19796' id='chk1'>&nbsp;<img src='../images/link.png' border='0'></td>    
    <td>€ <input type='text' value='19.001' id='fltFormTextBedrag1'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='19.000'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>
</tr>
<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='19.000'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row2' onClick="FormTRClick(event, '2')"><td><input type='checkbox' name='strFormFactuur[]' value='19436' id='chk2'>&nbsp;<img src='../images/link.png' border='0'></td>    
    <td>€ <input type='text' value='61.280' id='fltFormTextBedrag4'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row2' onClick="FormTRClick(event, '2')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='61.280'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row3' onClick="FormTRClick(event, '3')"><td><input type='checkbox' name='strFormFactuur[]' value='19718' id='chk3'></td>    
    <td>€ <input type='text' value='162.340' id='fltFormTextBedrag6'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row3' onClick="FormTRClick(event, '3')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='162.340'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
我有一张多行的桌子。我是这样的：

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

row1_1 Parent
  row1_2 Child
  row1_3 Child
row2_1 Parent
  row2_2 Child
row3_1 Parent
row4_1 Parent
  row4_2 Child
我希望在单击
时，将all第1行（或第2行，取决于单击的是哪一行）的
className
更改为
invoice tr clicked
，如上所示

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

页面中的HTML代码

<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td><input type='checkbox' name='strFormFactuur[]' value='19796' id='chk1'>&nbsp;<img src='../images/link.png' border='0'></td>    
    <td>€ <input type='text' value='19.001' id='fltFormTextBedrag1'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='19.000'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>
</tr>
<tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='19.000'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row2' onClick="FormTRClick(event, '2')"><td><input type='checkbox' name='strFormFactuur[]' value='19436' id='chk2'>&nbsp;<img src='../images/link.png' border='0'></td>    
    <td>€ <input type='text' value='61.280' id='fltFormTextBedrag4'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row2' onClick="FormTRClick(event, '2')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='61.280'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row3' onClick="FormTRClick(event, '3')"><td><input type='checkbox' name='strFormFactuur[]' value='19718' id='chk3'></td>    
    <td>€ <input type='text' value='162.340' id='fltFormTextBedrag6'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>
<tr class='invoice-tr-standard' id='row3' onClick="FormTRClick(event, '3')"><td></td>    
    <td>€ <input type='text' name='FormTextFltBedrag' value='162.340'> <img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;'></td>    
</tr>


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

发件人：

id属性最重要的方面是它必须 绝对独一无二。与class属性不同，class属性可以应用 一个页面中的许多元素都有相同的值，一个应用于 元素不能与同一页上其他地方使用的id匹配

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

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

发件人：

id属性最重要的方面是它必须 绝对独一无二。与class属性不同，class属性可以应用 一个页面中的许多元素都有相同的值，一个应用于 元素不能与同一页上其他地方使用的id匹配

我知道这并不能真正回答您的问题，但我不明白您的问题是什么，它可能完全基于HTML的不正确用法。

给您的行两部分唯一ID，如下所示：

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

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，如下所示：

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

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;
}
您的示例HTML甚至不包含
的...：-？我不确定增加
的额外价值是多少。它不会改变问题，也不会增加价值。信不信由你，文档的结构决定了遍历它的方式。正如W.Mursh所说，你不能有重复的ID。您可以使用javascript访问一个元素的子元素。因此，您不需要将子id设置为与其父id匹配。您的示例HTML甚至不包含
的...：-？我不确定增加
的额外价值是多少。它不会改变问题，也不会增加价值。信不信由你，文档的结构决定了遍历它的方式。正如W.Mursh所说，你不能有重复的ID。您可以使用javascript访问一个元素的子元素。因此，您不需要将子id设置为与其父id匹配。我需要使用
id
行1更改所有
的类。在课堂上这样做显然是行不通的。在某种程度上，
id
是唯一的。@Devator“unique”不是一个相对术语。要么有多个元素具有相同的ID，要么没有。如果没有看到HTML，很难判断发生了什么，每个ID是否都是唯一的？看起来您可能每个号码使用了2个ID:
row1
和
chk1
。如果是这样，并且没有两个ID是完全相同的，那么这就是正确的用法，我道歉。同时，为什么不向我们展示HTML输出呢？或者只是解释一下你的目标，这很难说。“好吧，我需要用id row1改变所有的类。”-这就是问题所在，应该只有一个。或者你真的想更改属于
的所有
？您发布的更新不太清晰，因为它不是HTML，而是文本表示。发布实际代码。好的，你已经证实了我的怀疑。你需要重新考虑你的战略。这不是建议，而是规范。您不能复制id并期望任何东西正常工作。好吧，我需要使用
id
行1更改所有
的类。在课堂上这样做显然是行不通的。在某种程度上，
id
是唯一的。@Devator“unique”不是一个相对术语。要么有多个元素具有相同的ID，要么没有。如果没有看到HTML，很难判断发生了什么，每个ID是否都是唯一的？看起来您可能每个号码使用了2个ID:
row1
和
chk1
。如果是这样，并且没有两个ID是完全相同的，那么这就是正确的用法，我道歉。同时，为什么不向我们展示HTML输出呢？或者只是解释一下你的目标，这很难说。“好吧，我需要用id row1改变所有的类。”-这就是问题所在，应该只有一个。或者你真的想更改属于
的所有
？你发布的更新不太清晰，因为它是