前端之家收集整理的这篇文章主要介绍了
JavaScript实现动态增删表格的方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
在上方文本框填入”姓名/Email/ 年龄”，实现在下方表格中动态添加或删除单元格
效果：
1. HTML代码：
<div align="center"><input type="button" value="添加" onclick="addRow()">
2. 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))
{
//<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>一行 insertRow() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>用于在表格中的指定位置插入一个新行
var newTr = testTble.insertRow();
//<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>四列 sertCell() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>用于在 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)
{
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前表格行号
var i = r.parentNode.parentNode.rowIndex;
//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>deleteRow()<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>本行
document.getElementById('testTble').deleteRow(i);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/40891.html
