Question

I’ve got the following code:

<script type = "text/javascript">
function showColors() {

var cells = getElementsbyClass("design");
for (var i = 0, len = cells.length; i < len; ++i) {
    cells[i].style.backgroundColor = "#ddd";
}

}

if(document.getElementsByClassName) {

getElementsByClass = function(classList, node) {    
    return (node || document).getElementsByClassName(classList);
  };


 </script>

<script type = "text/javascript">
window.onload = function() {

showColors();

  }
 </script>
table id="foo">
<tbody>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
</tbody>
 </table>
</body>

My question: How can i set every 2nd row in different color by getElementsbyClass(). How you can see, the actual code doesn’t work :(. Please do not use JQuery or selectivizr. Please stay on the example :). I need a dynamically example. I know that css would work!!! It is also important: It should work for all browsers!!

Many Thanks for answering 🙂

Answer 1

why dont you fetch the tbody element, loop over the TR elements and add changing classes like this:

var i
  , current
  , rows = document.getElementById('table-body').getElementsByTagName('tr');

for(i = 0; i < rows.length; i++) {
  current = current !== 'class1' ? 'class1' : 'class2';
  rows[i].setAttribute('class', current);
}

​

you could see a working example at js-fiddle: http://jsfiddle.net/VF3Ay/3/