人只需不取得标的目标，就不会取得自己。有没有人爱，我们也要努力做一个可爱的人。不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。
在上方文本框填入”姓名/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>
到此这篇关于JavaScript实现动态增删表格的方法就介绍到这了。与其担心未来，不如现在好好努力。人生没有彩排，每个人有每个人的。不是所有的人都会完美。岁月如歌，人生如潮。有一颗随缘心，你会更洒脱；有一颗平常心，你会更从容；有一颗慈悲心，你会更积善；有一颗感恩心，你会更幸福；有一颗因果心，你会更明理。更多相关JavaScript实现动态增删表格的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！