更改相同ID的班级 [英] Changing class of same id

问题描述

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

$ $ p $ 函数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）。

我该怎么做？我是否必须将这些元素放入一个数组中，然后遍历它们以给它们适当的类名？或者有没有其他方法可以做到这一点？

谢谢。

$ b 更新

我有一个包含多行的表。我有这样的样子：

  row1父
 row1子
 row1子
 row2父
 row2 Child 
 row3父级
 row4父级
 row4子级
  

我希望 all row1（或row2，取决于哪个被点击过）的 className 改为<$ c点击上面看到的< tr> ，$ c> invoice-tr-clicked 。

所以，当点击一个'父'的'子'行（因为他们共享相同的ID）必须将他们的类名更改为 invoice-tr-clicked 或 invoice-tr-standard ，具体取决于它们的当前样式。

page

 < tr class ='invoice-tr-standard'id ='row1'onClick =FormTRClick （事件'1'）>< td>< input type ='checkbox'name ='strFormFactuur []'value ='19796'id ='chk1'>& nbsp;< img src = ../images/link.png边界= 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 属性must always 必须是唯一的。不能有两个元素具有相同的 id 值。如果您在多个元素上使用相同的ID，则无法保证任何工作。

发件人： http://reference.sitepoint.com/html/core-attributes/id

id属性最重要的一点是它必须是
绝对唯一。与class属性不同，class属性可能将
相同的值应用于页面中的许多元素，应用于
元素的id不能与在同一页面上其他地方使用的id相匹配。

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

I'm looking for a method to change the class of the same id's. I have a table with multiple rows and some parent-child 'rows'. Thus when clicked on the parent, the class of the child has to change aswell. I have the following code:

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

This script is called by: <tr class='invoice-tr-standard' id='row1' onClick="FormTRClick(event, '1')"> and each parent has a new ID (so parent + child carry the same ID).

How can I do this? Do I have to put the elements into an array and then loop through them to give them the proper classname? Or is there any other way todo so?

Thanks.

Update

I have a table, with multiple rows. I have it like this:

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

I want the className of all row1 (or row2, depends on which one has been clicked on) to be changed to invoice-tr-clicked when clicked on the <tr> as seen above.

So, when clicked on a 'parent' the 'child' rows (since they share the same ID) have to have their classnames changed into invoice-tr-clicked or invoice-tr-standard depending on their current style.

HTML code as from the page

<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>

解决方案

This seems to be a common mistake, but id attributes must always be unique. There cannot be two elements with the same id value. You are not guaranteed anything to work if you are using the same id on multiple elements.

From: http://reference.sitepoint.com/html/core-attributes/id

The most important aspect of the id attribute is that it must be absolutely unique. Unlike the class attribute, which may apply the same value to many elements in a page, an id that’s applied to an element must not match an id used anywhere else on the same page.

I know this doesn't really answer your question, but I don't understand what your question is, it may be completely based on incorrect usage of HTML.

这篇关于更改相同ID的班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！