说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

表格中行的隐藏与显示

编辑:说三道四文库 发布时间:2018-05-23 05:29
HTML文档下载 WORD文档下载 PDF文档下载
<table>
 <tr><td>行1<input type=text name="P1" size=20><input type=button value="新增"></td></tr>
 <tr><td>行2<input type=text name="P2" size=20></td></tr>
 <tr><td>行3<input type=text name="P3" size=20></td></tr>
</table>

问题:新打开的页面中,表格中的行1是显示的,而行2和行3是隐藏的。当点击行1后面的"新增"按钮时,出现行2的内容;当再次点击行1后面的"新增"按钮时,出现行3的内容。

请问大侠:怎么实现?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">

var rows=1;

function add_click()
{

var tb = document.getElementById("table1");
if(rows < tb.rows.length)
{
tb.rows[rows].style.display = "";
rows = rows + 1; 
}
}
</script>
</head>

<body>
<table id="table1"> 
<tr> <td>行1 <input type=text name="P1" size=20> <input type=button value="新增" onclick="javascript:add_click()"> </td> </tr> 
<tr style="display:none"> <td>行2 <input type=text name="P2" size=20> </td> </tr> 
<tr style="display:none"> <td>行3 <input type=text name="P3" size=20> </td> </tr> 
</table> 
</body>
</html>
style.display='none';  这个是隐藏
.style.display='block'; 这个是显示

循环自己写了

<table id="table1">
<tr> <td>行1 <input type=text name="P1" size=20> <input type=button value="新增" onclick="javascript:add_click()"> </td> </tr> 
<tr style="display:none"> <td>行2 <input type=text name="P2" size=20> </td> </tr> 
<tr style="display:none"> <td>行3 <input type=text name="P3" size=20> </td> </tr>
<tr> <td>行4 <input type=text name="P4" size=20> </td> </tr>  
</table>



2楼,如果在表格中再加上行4,行4我不想隐藏,为什么测试不通过啊?
?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">

var rows=1;

function add_click()
{
    
    var tb = document.getElementById("table1");
    if(rows < tb.rows.length)
    {
        tb.rows[rows].style.display = "";
        rows = rows + 1; 
    }
}
</script>
</head>

<body>
<table id="table1"> 
<tr> <td>行1 <input type=text name="P1" size=20> <input type=button value="新增" onclick="javascript:add_click()"> </td> </tr> 
<tr style="display:none"> <td>行2 <input type=text name="P2" size=20> </td> </tr> 
<tr style="display:none"> <td>行3 <input type=text name="P3" size=20> </td> </tr>
<tr style=""> <td>行4 <input type=text name="P4" size=20> </td> </tr> 
</table> 
</body>
</html>
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘