在上方文本框填入”姓名/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> <p align="center"><input type="button" value="添加" onclick="addrow()"></p> <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动态增删表格方法的实现的详细内容。