JavaScript DOM : add an attribute to a <tr>

Question

I want to create a JavaScript function that parses my HTML page, get the Table by it's ID, and after that, add a class attribute to each <tr> as if the line is the 1st, I'll add : class="line1" to the <tr> but if the line is the second, I'll add class="line2" to the <tr> How to do please

Answer 1

its very easy in jquery ... as below :-

$(document).ready(function() {
    //for table row
    $("tr:even").addClass("AlternateBG1");
    $("tr:odd").addClass("AlternateBG2");
})

BUT IN JQUERY...

Answer 2

With jQuery is really simple, do something like:

var i = 1;
$("#myTable tr").each(function() {
    $(this).addClass("line"+i);
    i++;
});

Where #myTable is your table id, and $(this) inside each function will be the current element on the cycle.

Answer 3

If I understand you corrrectly, you want to alternate the class names to get some kind of zebra style right?

var table = document.getElementById('yourTableId');
var rows = table.rows;
for(var i = 0, l = rows.length;i < l; i++) {
    rows[i].className = 'class' + ((i%2) + 1);
}

See the HTML DOM Table Object.

Answer 4

It is easy without jQuery:

oTBody=document.getElementById("tBodyId");
//for (key in oTbody.childNodes) {
for (var nPos=0, nLength = oTbody.childNodes.length; nPos<nLegth; nPos++)}
    oRow = oTbody.childNodes[nPos];
    if (oRow && oRow.tagName && oRow.tagName.toLowerCase() == "tr") {
        oRow.className = (bNormalRow? sClass1:sClass2);
        bNormalRow = !bNormalRow;
    }
}

Answer 5

var table = document.getElementById("yourTableId");
for(var i in table.rows){
  table.rows[i].className = 'line'+(i+1).toString();
}