1

我的行没有正确着色”

请看一下我的 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 行上色了？为什么不是第三排？

更新代码：

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

        });
    });

我正在通过使用 json 的 jquery 创建 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;
}
4

3 回答 3

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");
于 2012-11-12T05:30:31.883 回答
1

一些东西：

首先，元素 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 中使用伪选择器

于 2012-11-12T05:34:24.623 回答
0

您的代码没有突出显示表第 3 行的原因是因为结果getElementsByClassName是NodeList，而不是 Array。

因此，在使用索引运算符进行随机访问之前，您需要将NodeList 转换为 Array。

例如

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

这是一个工作小提琴

但是，根据 Kundan 的回答，您为什么不使用 jQuery 解决方案似乎很奇怪，因为它的工作量要少得多。jQuery小提琴在这里

于 2012-11-12T06:21:12.330 回答