Question

我的行没有正确着色“

请查看我的HTML输出：

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

现在只有第1和第5行变色了？为什么不是第3排？

更新代码：

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

        });
    });

我通过jquery消耗json创建html。表格正在正确创建。现在通过javascript，我将替换行设置为不同的颜色，标题应该是不同的颜色。这是我的第一个问题。请看下面我的剧本：

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

但是我的行没有被设计。请告诉我问题出在哪里。

以下是css代码：

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

Answer 1

我相信函数“tablerows”是在构建表之前执行的。所以把这个代码放在append方法之后。

示例：

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

在交替上添加颜色类的最简单方法是：

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

Answer 2

一些事情：

首先，元素ID应该是唯一的。不要为每个tr提供相同的ID tablecontent。

在修复之后，你可以抛弃整个辅助函数tablerows()，因为它是冗余的，并且逻辑可以移动到构建表的位置，即：

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

或者根据Kundan

的建议，简单地在CSS中使用psuedo-selectors

Answer 3

您的代码未突出显示第3行表格的原因是因为getElementsByClassName的结果是NodeList, not an Array。

因此，在使用索引运算符进行随机访问之前，您需要convert NodeList到数组。

e.g。

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

这是一个有效的fiddle

然而，根据Kundan的回答，为什么你不使用jQuery解决方案似乎很奇怪，因为它的工作要少得多。 jQuery小提琴here

适当的行没有变色

3 个答案: