Javascript 正确的行没有被着色

我的行没有正确上色“

请查看我的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>

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

示例：

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

另外，在Alternative上添加颜色类的最简单方法是：

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

有几件事：

首先，元素ID应该是唯一的。不要给每个

tr

相同的ID

tablecontent

修复后，您可以放弃整个helper函数

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

---

for（var i=0，size=data.length；i代码未突出显示表行#3的原因是
getElementsByClassName
的结果是错误的

因此，在使用索引操作符进行随机访问之前，需要将节点列表添加到数组中

e、 g

var rowsList=tableid.getElementsByClassName（'tablecontent'）；
var rows=Array.prototype.slice.call（rowsList）；
对于（i=0；i

这是一张工作票

然而，根据昆丹的回答，你为什么不使用jQuery解决方案似乎很奇怪，因为它的工作量要小得多。jQuery fiddle
创建的每一行都应该有唯一的Id，所以使用class而不是Id来为备用行着色，我必须使用OO JS。@user1814044，你的代码中没有问题。你是否尝试将该函数放在ppend方法？@kundan-i在append之后使用了函数。它正在工作。但是没有正确的行被着色。嗨，斯图尔特。谢谢你的摆弄。但是现在我只显示了3行，而不是6行。@user1814044我无法模拟通过ajax返回的JSON，但是请注意，上面更新的示例HTML有错误的TR类名。我已经更新了jQuery提琴和Javascript提琴感谢斯图尔特。现在工作得非常好。
$(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");

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

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