JavaScript实现动态增删表格的方法
程序员文章站
2023-03-29 15:05:55
在上方文本框填入”姓名/email/ 年龄”，实现在下方表格中动态添加或删除单元格
效果：
1. html代码：
<...
在上方文本框填入”姓名/email/ 年龄”，实现在下方表格中动态添加或删除单元格
效果：
1. html代码：
<body>
<p align="center" id="info">
姓名 : <input type="text" id = "username">
email : <input type="text" id = "email">
年龄 : <input type="text" id = "age">
</p>
<div align="center"><input type="button" value="添加" onclick="addrow()"></div>
<hr>
<table align="center" border="1" id = "testtble" style="width: 60%;text-align: center;border:1px solid lightgreen">
<tr>
<td>姓名</td>
<td>email</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
2. javascript代码：
<script type="text/javascript">
// 三个文本框
// 一个添加按钮 按钮实现功能 添加信息到表格中
// 一个表格，行数动态增加的
function addrow()
{
// 获取input元素节点数组
var inputnodes = document.getelementsbytagname("input");
var str = new string(inputnodes[0].value);
var str1 = new string(inputnodes[1].value);
var str2 = new string(inputnodes[2].value);
if ((str.length > 0) && (str1.length > 0) && (str2.length > 0))
{
//添加一行 insertrow() 方法用于在表格中的指定位置插入一个新行
var newtr = testtble.insertrow();
//添加四列 sertcell() 方法用于在 html 表的一行的指定位置插入一个空的 <td> 元素
var newtd0 = newtr.insertcell();
var newtd1 = newtr.insertcell();
var newtd2 = newtr.insertcell();
var newtd3 = newtr.insertcell();
//分别给每一列赋值
newtd0.innertext= inputnodes[0].value;
newtd1.innertext= inputnodes[1].value;
newtd2.innertext= inputnodes[2].value;
newtd3.innerhtml = "<input type='button' value='删除' onclick='deletetable(this)'>";
}
else
{
alert("请先把信息填写完整！");
return;
}
}
function deletetable(r)
{
//获取当前表格行号
var i = r.parentnode.parentnode.rowindex;
//调用deleterow()删除本行
document.getelementbyid('testtble').deleterow(i);
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。