怎样用jquery实现只显示表格中间的几行

我的意思是:表格有很多行,但是我只想显示中间的几行!或者指定的那几行!如何实现?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
$(document).ready(function(){
//如果规定显示行号,请用下面代码
//var showNumber=new Array(3,5,6,8);

//如果要显示中间几行,请用下面2行代码
middle=($("#table tr").length/2).toFixed(0);
var showNumber=new Array(middle,middle+1,middle-1);

$("#table tr").hide();
for(i=0;i<showNumber.length;i++){

$("#table tr:eq("+showNumber[i]+")").show();

}

});

</script>
</head>

<body>

<table width="800" border="1" id="table">
<tr>
<td>0</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-09-05
下载:jquery-1.6.2.js 地址:,命名jquery-1.6.2.js,放于本网页同级目录。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
if($("#button").val()=="隐藏") {
$("#button").val("显示");
$("#table").hide();
}
else {
$("#button").val("隐藏");
$("#table").show();
}

});
});

</script>

</head>

<body >
<table width="200" border="1" id="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

<label>
<input name="button" type="button" id="button" value="隐藏" />
</label>
</body>
</html>
第2个回答  2011-09-05
$document.ready(function(){
$("#t").css("display","none"); ;
});
<table>
<tr>
<td>inner content 0</td>
</tr>
<tr id='t'>
<td>inner content 1</td>
</tr>
<tr>
<td>inner content 2</td>
</tr>
</table>
这样,第二行业就是 id为t的行会不显示,只显示1,3行。