change table row class name dynamically using javascript

Question

After hitting ADD button I get yet another row. I need it's row class should be changed accordingly by identifying previous row's class. If previous row class name is odd then newly created class name should be even and so on. How do we do this by using javascript? How can we modify existing code to do this or any other suggestion?
Proper CSS file is ready for alternate class names. When I fetch data from database then alternate odd/even row will be created. But when I hit ADD button it always take first rows class name because there is a clone of first row always. I have no worries for cloned row except class name.

<script>
function addRow(tableID) {
  var table = document.getElementById(tableID);
  if (!table) return;

  var newRow = table.rows[1].cloneNode(true);


  // Now get the inputs and modify their names 
  var inputs = newRow.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    // Update inputs[i]
  }
  // Add the new row to the tBody (required for IE)
  var tBody = table.tBodies[0];
  tBody.insertBefore(newRow, tBody.lastChild);
}


</script>

<table id="table1" border=1 class="display">
        <tr class="odd">
            <th>Operator ID</th>
            <th>Status</th>
        </tr>
        <tr class="odd">  
            <td>TestA</td>
            <td>ActiveA</td>
        </tr>
        <tr class="even">  
            <td>TestB</td>
            <td>ActiveB</td>
        </tr>
</table>
<input type="button" value="ADDROW" onclick=addRow("table1"); />

Just a side note, I don't know if this helps you, but you can select based on even/odd using the :even and :odd selectors — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 1, 2013 at 13:37

Niet the Dark Absol · Accepted Answer · 2013-04-01 13:38:27Z

2

Why not just use the proper CSS:

#table1 tr {
    /* odd row styles */
    /* also acts as fallback for really old browsers */
}
#table1 tr:nth-child(even) {
    /* even row styles */
}

answered Apr 1, 2013 at 13:38

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AmitG Over a year ago

css is ready but when I hit ADD button then class name should be changed dynamically because new row is getting generated dynamically but with first row's class name always and that is the problem for me. Second more thing is that when I refresh the page then every thing will be fine. These class name will be aligned automatically once refreshed page. But I need while adding extra row which doesn't take effect.

Niet the Dark Absol Over a year ago

That's why I'm suggesting CSS. If you use the CSS I've shown in my answer, odd and even rows will be styled as defined and this will be updated automatically so you don't have to worry about it - even if you rearrange the rows!

palaѕн · Accepted Answer · 2013-04-01 13:57:55Z

1

You can simply do something like this:

tr:nth-child(even) td {
    background-color: #ccc;
}
tr:nth-child(odd) td {
    background-color: #fff;
}

DEMO HERE

edited Apr 1, 2013 at 13:57

answered Apr 1, 2013 at 13:52

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

1 Comment

Niet the Dark Absol Over a year ago

Isn't this just a rip-off of my answer? Just without the graceful degradation?

Collectives™ on Stack Overflow

change table row class name dynamically using javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related