JavaScript实现动态增删表格的方法

前端之家收集整理的这篇文章主要介绍了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="/tag/tianjia/" target="_blank" class="keywords">添加</a>一行 insertRow() <a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>用于在表格中的指定位置插入一个新行 var newTr = testTble.insertRow(); //<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>四列 sertCell() <a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>用于在 HTML 表的一行的指定位置插入一个空的 <td&gt; 元素 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="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前表格行号 var i = r.parentNode.parentNode.rowIndex; //<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>deleteRow()<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>本行 document.getElementById('testTble').deleteRow(i); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章