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

最新推荐文章于 2020-05-13 16:57:15 发布

kevinliuu

最新推荐文章于 2020-05-13 16:57:15 发布

阅读量1.1k

点赞数

文章标签： javascript input table button delete function

<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='删除' οnclick='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='删除' οnclick='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>

kevinliuu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript动态生成表格，并实现对表格行的添加和删除

表格相关 function add_row(){ if ((document.getElementById("name").value=="")||(document.getElementById("pass").value=="")) {alert("值不能为空"); return 0;} var tableobj=document.getElementById("table_1")
复制链接

扫一扫