您的位置:首页 > Web前端 > JavaScript

javascript动态生成表格,并实现对表格行的添加和删除

2007-07-05 10:18 1226 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表格相关</title>
<script language="javascript">
function add_row(){
if ((document.getElementById("name").value=="")||(document.getElementById("pass").value==""))
{alert("值不能为空"); return 0;}

var tableobj=document.getElementById("table_1");
var rowobj=tableobj.insertRow(tableobj.rows.length);

var cell1=rowobj.insertCell(rowobj.cells.length);
var cell2=rowobj.insertCell(rowobj.cells.length);
var cell3=rowobj.insertCell(rowobj.cells.length);

cell1.innerHTML=document.getElementById("name").value;
cell2.innerHTML=document.getElementById("pass").value;
cell3.innerHTML="<input type='button' value='删除' onclick='delete_row("+(tableobj.rows.length-1)+");leo()'>";

document.getElementById("name").value="";
document.getElementById("pass").value="";
}

function leo(){//当删除一行后,对各行重新建立索引
var tableobj=document.getElementById("table_1");
for(i=1;i<tableobj.rows.length;i++)
{
tableobj.rows[i].cells[2].innerHTML="<input type='button' value='删除' onclick='delete_row("+i+");leo()'>";
}
}

function delete_row(i){
var tableobj=document.getElementById("table_1");
alert("删除第"+i+"行");
tableobj.deleteRow(i);

}

</script>

</head>

<body>
<div align="center">
<input name="name" type="text">
<input name="pass" type="text">
<input name="add" type="button" onClick="add_row()" value="添加">
</div>
<div align="center">
<table id="table_1" border="1">
<tr>
<td>帐号</td><td>密码</td><td>操作</td>
</tr>

</table>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: