Question

javascript高手请进，关于表格分页问题？有个15行的表格 每页显示5行，单击表格下面的数字1，2，3各显示不

同的5行 代码如下：CSS: #wrap{ width: 400px; margin: auto;}
table{ border-collapse:collapse;}
table caption{font-weight: bold;}
table tr td,table tr th{ padding:10px; text-align:center;}
table tr.even{background: #ccc;}
table tr.odd{background: #666;}
#wrap table thead tr{background: #fa0;}
span{ margin-right: 20px;padding: 5px;}
html部分：<div id="wrap">
<table border="1" bordercolor="#0066CC" cellpadding="5px" id="tablenews">
<caption>员工信息表</caption>
<thead>
<tr><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>Tom</td><td>15</td><td>男</td><td>1234567</td><td>湖南邵阳</td></tr>
<tr><td>Jim</td><td>17</td><td>女</td><td>3456789</td><td>株洲县</td></tr>
<tr><td>John</td><td>19</td><td>男</td><td>6789001</td><td>安徽省</td></tr>
<tr><td>till</td><td>20</td><td>男</td><td>2345678</td><td>北京市</td></tr>
<tr><td>Tang</td><td>32</td><td>女</td><td>0987655</td><td>天津市</td></tr>
<tr><td>tom</td><td>15</td><td>男</td><td>1234567</td><td>湖南邵阳</td></tr>
<tr><td>Jim</td><td>17</td><td>女</td><td>3456789</td><td>株洲县</td></tr>
<tr><td>John</td><td>19</td><td>男</td><td>6789001</td><td>安徽省</td></tr>
<tr><td>till</td><td>20</td><td>男</td><td>2345678</td><td>北京市</td></tr>
<tr><td>Tang</td><td>32</td><td>女</td><td>0987655</td><td>天津市</td></tr>
<tr><td>Tom</td><td>15</td><td>男</td><td>1234567</td><td>湖南邵阳</td></tr>
<tr><td>Jim</td><td>17</td><td>女</td><td>3456789</td><td>株洲县</td></tr>
<tr><td>John</td><td>19</td><td>男</td><td>6789001</td><td>安徽省</td></tr>
<tr><td>till</td><td>20</td><td>男</td><td>2345678</td><td>北京市</td></tr>
<tr><td>Tang</td><td>32</td><td>女</td><td>0987655</td><td>天津市</td></tr>
</tbody>
</table>
</div>
js部分：window.onload= function(){ var tr= document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for(var j=0;j< tr.length;j++){ if(j>=5){ tr[j].style.display="none";}}
var row=5;
var col=tr.length/row;
var p= document.createElement('p');
for(var n=0;n<col;n++){
var span= document.createElement('span');
var text= document.createTextNode(n+1);
span.appendChild(text);
p.appendChild(span);
span.onmouseover= function(){
this.style.color="#fff";
this.style.background="#fa0";
this.style.cursor="hand";}
span.onmouseout= function(){
this.style.color='';this.style.background='';}}
document.getElementById('wrap').appendChild(p);
图中代码接上：
问题看图片？
document.getElementById('wrap').appendChild(p);
var sspan= document.getElementsByTagName('span');
for(var m=0;m< sspan.length;m++){
sspan[m].onclick= function(){
for(var j=0;j< tr.length;j++){
tr[j].style.display='none';}
for(var k=5*m;k<((5*m)+5);k++){
tr[k].style.display=''; }
}
}
}
为什么tr[k].style.display='';提示说为空或不是对象 ？

Answer 1

判k的范围，不然在tr数量不为5的整倍数时会出问题。
另外cursor: hand是IEonly，换成cursor: pointer。

Answer 2

其实大家都找到了问题的所在，在翻页到最后一页时，可能会出现你说的问题
将for(var k=5*m;k<((5*m)+5);k++)改为for(var k=5*m;k<((5*m)+5)&&k<tr.length;k++)

Answer 3

你确定k这个数字 在tr的length范围内？