没有得到有色

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行得到有色何不第三排？

更新的代码：

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相同的编号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>'; 
} 

或者干脆使用伪选择您的CSS由Kundan推荐

Answer 3

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

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

例如

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

这里是一个工作fiddle

然而，按照Kundan的答案，这似乎很奇怪，为什么你会不使用jQuery的解决方案，因为它是非常少的工作。 jQuery小提琴here