Question

My rows are not getting colored properly”

Please have a look at my HTML output:

<table id="mytable" cellspacing="0" cellpadding="5">
<tbody>
<tr class="tableheader">
<th>Name</th>
<th>Code</th>
<th>Value</th>
<th>Bid</th>
<th>Offer</th>
</tr>
<tr class="rowoddcolor">
<td>Apple</td>
<td>APPL</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
<tr class="tablecontent">
<td>Microsoft</td>
<td>MSFT</td>
<td>78</td>
<td>70</td>
<td>75</td>
</tr>
<tr class="rowevencolor">
<td>Google</td>
<td>GOGL</td>
<td>101</td>
<td>98</td>
<td>102</td>
</tr>
<tr class="tablecontent">
<td>Nokia</td>
<td>NOK</td>
<td>10</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="rowoddcolor">
<td>Samsung</td>
<td>SAMS</td>
<td>89</td>
<td>86</td>
<td>90</td>
</tr>
<tr class="tablecontent">
<td>IntelCorporation</td>
<td>INTC</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
</tbody>
</table>

Now only the 1st and 5th row getting colored? why not 3rd row?

updated code:

function tablerows(id){
    if(document.getElementsByTagName){  
        var tableid = document.getElementById(id);  
        var rows = tableid.getElementsByClassName('tablecontent'); 
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "rowevencolor";
            }else{
                rows[i].className = "rowoddcolor";
            }      
        }
    }
}

$(document).ready(function() {
                 $.getJSON('table.json',function(data){

                    $('#mytable').empty(); 
                    var html = '';
                    html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
                    for (var i=0, size=data.length; i<size;i++) {                           
                            html += '<tr class="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
                                         + data[i].value+ '</td><td class="bid">'
                                         +data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
                            }

            $('#mytable').append(html);
            tablerows('mytable');

        });
    });

I am creating html through jquery consuming json. Table is getting created properly. Now through javascript, i am styling my alternate rows to different color and header should be in different color. This is my first question. Please see below my script:

function tablerows(id){
    if(document.getElementsByTagName){  
        var tableid = document.getElementById(id);  
        var rows = tableid.getElementById("tablecontent"); 
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "rowevencolor";
            }else{
                rows[i].className = "rowoddcolor";
            }      
        }
    }
}

$(document).ready(function() {
                 $.getJSON('table.json',function(data){

                    $('#mytable').empty(); 
                    var html = '';
                    html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
                    for (var i=0, size=data.length; i<size;i++) {                           
                            html += '<tr id="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
                                         + data[i].value+ '</td><td class="bid">'
                                         +data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
                            }

            $('#mytable').append(html);

        });

        $(function(){
            tablerows('mytable');
        });
    });

But my rows are not getting styled. Please tell me where is the problem.

Below is css code as well:

.rowoddcolor{
    background-color:#FFFFFF;
}
.rowevencolor{
    background-color:#D3D3D3;
}

Answer 1

I believe the function “tablerows” is getting executed before the build of table. So put that code after the append method.

Example :

$(document).ready(function() {
    $.getJSON('table.json',function(data){
        // existing stuff
        $('#mytable').append(html);
        tablerows('mytable');
    });
});

Also the easiest way add the color class on alternating would be :

$('#mytable tr:even').addClass("rowevencolor");
$('#mytable tr:odd').addClass("rowoddcolor");