Proper rows not getting colored

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

every row created should have unique Id,so use class instead of id — rajesh kakawat, Nov 12 '12 at 05:30

score 1 · Accepted Answer · answered Nov 12 '12 at 05:30

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");

answered Nov 12 '12 at 05:30

Kundan Singh Chouhan

13,952
4
27
32

actually for coloring alternate rows, i have to use OO JS. – user1814044 Nov 12 '12 at 05:33
@user1814044, there is no problem in your code did you tried to put that function after append method? – Kundan Singh Chouhan Nov 12 '12 at 05:35
@kundan-i used function after append. it is working. but not proper rows getting colored. – user1814044 Nov 12 '12 at 05:48

score 1 · Answer 2 · answered Nov 12 '12 at 05:34

A few things:

First, Element ID's should be unique. Do not give every tr the same id tablecontent.

After that's fixed, you can ditch the entire helper function tablerows() as it is redundant and that logic can be moved to where you are building the table, i.e.:

for (var i=0, size=data.length; i<size;i++) {                           
    html += '<tr class="tablecontent row' + (i % 2 ? 'even' : 'odd') + 'color"><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>';
}

Or simply use psuedo-selectors in your CSS as recommended by Kundan

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

The reason why your code is not highlighting table row #3 is because the result of getElementsByClassName is a NodeList, not an Array.

You will thus need to convert the NodeList to an Array before using the indexing operator for random access.

e.g.

    var rowsList = tableid.getElementsByClassName('tablecontent');
    var rows = Array.prototype.slice.call(rowsList);
    for (i = 0; i < rows.length; i++) 
       // ...

Here is a working fiddle

However, as per Kundan's answer, it seems strange why you wouldn't use a jQuery solution, as it is much less work. jQuery fiddle here

edited May 23 '17 at 12:12

Community

1
1

answered Nov 12 '12 at 06:21

StuartLC

104,537
17
209
285

Hi Stuart. thanks for the fiddle. But now i am getting just 3 rows displayed instead of 6. – user1814044 Nov 12 '12 at 06:33
@user1814044 I can't simulate the JSON returned via ajax, but note that your updated example HTML above has incorrect TR class names. I've updated the jQuery fiddle [here](http://jsfiddle.net/fxNft/3/) and the Javascript fiddle [here](http://jsfiddle.net/fxNft/4/) – StuartLC Nov 12 '12 at 06:39
Thanks Stuart. Working perfectly fine now. – user1814044 Nov 12 '12 at 06:46

Proper rows not getting colored

3 Answers3