如何动态隐藏显示行？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
var i=2
function hidden()
{
  document.getElementById("t"+i).style.display = "none" ;
i++;}
function nothidden()
{
  document.getElementById('t'+i).style.display = "block" ;
i--;}  </script>
</HEAD><body>
<table>
<tr id="t1"><td><input type="text" value="1"></td> </tr>
<tr id="t2" > <td ><input type="text" value="2"></td> </tr>
<tr id="t3"> <td><input type="text" value="3"></td> </tr>
<tr id="t4"> <td><input type="text" value="4"></td> </tr>
<tr id="t5"><td><input type="text" value="5"></td>  </tr>
<tr id="t6"><td><input type="text" value="6"></td> </tr>
</table>
<input type="Button" ID="delltutor"  name="Button"    onclick="hidden()" style="width: 56px" value="隐藏" />
<input type="Button" ID="addtutor"  name="Button"  onclick="nothidden()"  style="width: 56px" value="显示" />
  </body> </HTML>
<tr id="t1"> </tr>
<tr id="t2"> </tr>
<tr id="t3"> </tr>
<tr id="t4"> </tr>
<tr id="t5"> </tr>
<tr id="t6"> </tr> 如上面你写的如果你能确定这样的第一行是t1
第二行是t2.....
这样的话，对于这个table来说，第几行就是t几对吧。那这样你那个js 方法就是可以这样改。
var i;
function hidden()
{
  for(i=0;i<document.getElementById("table的id").rows.length;i++){
  document.getElementById('t'+(i+1)).style.display = "none" ;
}
}
function nothidden()
{
for(i=0;i<document.getElementById("table的id").rows.length;i++)
  document.getElementById('t'+(i+1)).style.display = "block" ;
}
}
那就就是i从1开始
隐藏 style.display = "" ; 就行了
<html>
<head>
</head>
<script>
var i=2
function hidden()
{
  document.getElementById('t'+i).style.display = "none" ;
i++;
if(i>=6)
{
i=6;
}
alert("hidden"+i);
}
function nothidden()
{
  document.getElementById('t'+i).style.display = "block" ;
i--;
if(i==0)
{
i=2;
}
alert("nothidden"+i);
} </script>
<body>
<table border="1">
<tr id="t1"> <td>ss1</td></tr>
<tr id="t2"><td>ss2</td> </tr>
<tr id="t3"><td>ss3</td> </tr>
<tr id="t4"><td>ss4</td> </tr>
<tr id="t5"><td>ss5</td> </tr>
<tr id="t6"> <td>ss6</td></tr> </table>
<input type="Button" ID="delltutor"  name="Button"    onclick="hidden()" style="width: 56px" value="隐藏" />
<input type="Button" ID="addtutor"  name="Button"  onclick="nothidden()"  style="width: 56px" value="显示" />
</body>
</html>  這樣是不會出錯的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <body>
<table id="table1">
<tr id="t1"> <td> <input type="text" value="1"> </td> </tr>
<tr id="t2" > <td > <input type="text" value="2"> </td> </tr>
<tr id="t3"> <td> <input type="text" value="3"> </td> </tr>
<tr id="t4"> <td> <input type="text" value="4"> </td> </tr>
<tr id="t5"> <td> <input type="text" value="5"> </td>  </tr>
<tr id="t6"> <td> <input type="text" value="6"> </td> </tr>
</table>
<input type="Button" ID="delltutor"  name="Button"    onclick="table1.hidden()" style="width: 56px" value="隐藏" />
<input type="Button" ID="addtutor"  name="Button"  onclick="table1.show()"  style="width: 56px" value="显示" />
  </body>
  <script type="text/javascript">
//如果需要，可能写为类
var table1 = document.getElementById("table1");
table1.minIndex = 0; //最少要显示行的索引，索引为0，则第一行要显示，此值就小于maxIndex，大于等于-1
table1.maxIndex = 5; //可以显示的最大行的索引，此值应大于等于0，小于实际行数
table1.showIndex = 5; //当前显示的行索引，此值就大于minIndex，小于maxIndex
table1.show = function()
{
if (table1.showIndex < table1.maxIndex)
{
table1.rows[table1.showIndex + 1].style.display = "block";
table1.showIndex++;
}
}
table1.hidden = function()
{
if (table1.showIndex > table1.minIndex)
{
table1.rows[table1.showIndex].style.display = "none";
table1.showIndex--;
}
}
  </script> </HTML>直接拷备使用即可，如果需要可改为类.
看我的吧
嘿嘿
你们的都有错误　<body>
<strong><TABLE id=tb>
<tr id="t1"> <td>1 </td> </tr>
<tr id="t2"> <td>2 </td> </tr>
<tr id="t3"> <td>3 </td> </tr>
<tr id="t4"> <td>4 </td> </tr>
<tr id="t5"> <td> 5 </td> </tr>
<tr id="t6"> <td>6 </td> </tr>
</TABLE> <input type="Button" ID="delltutor"  name="Button"    onclick="hidden()" style="width: 56px" value="隐藏" />
<input type="Button" ID="addtutor"  name="Button"  onclick="nothidden()"  style="width: 56px" value="显示" />
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT></strong>
</body>
</html>
注意到javascript的Eval了吗id=eval("id"+i)
<script language="javascript" type="text/javascript">
window.onload = function(){
var oDelltutor = document.getElementById('delltutor');
var oAddtutor = document.getElementById('addtutor');
var oTableLength = document.getElementById('table1').rows.length;
alert(oTableLength);

oDelltutor.onclick = function(){
if(oTableLength == 0){return;}
document.getElementById('t'+ oTableLength).style.display = 'none';
oTableLength--;

}

oAddtutor.onclick = function(){
oTableLength++;
if(oTableLength > 6){oTableLength = document.getElementById('table1').rows.length;return;}
document.getElementById('t'+ oTableLength).style.display = 'block';
}
}
</script>
var i=document.getElementById("tb").rows.length;
var j=i;
function hidden()
{
  document.getElementById('t'+i).style.display = "none" ;
  i--;
  if(i <1)
  {
  i=1;
  }
}
function nothidden()
{   document.getElementById('t'+i).style.display = "block" ;
i=i+1;
if(i>j)
{
i=j;
}
}