Changing class of same id

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;
        开发者_JAVA百科   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.

---

Give your rows two-part unique ids like this:

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

And change the class switch part of your code to:

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