JS实现动态增删表格

作者: 扒块腹肌 | 来源:发表于2017-02-05 15:07 被阅读371次

JS实现动态增删表格
JavaScript
bootstrap-table remove record
ElementUI el-table表格动态添加一行、删除一行
数据增删改查实例
jQuery事件
2019-01-14
JS中动态增删改元素
动态表格的增删改查
表格创建的方法

在上方文本框填入"姓名/Email/ 年龄"，实现在下方表格中动态添加或删除单元格

效果：

作业3效果.gif

1. Html代码：

<body>
<p align="center" id="info">
    姓名&nbsp;:&nbsp;<input type="text" id = "username">&nbsp;
    Email&nbsp;:&nbsp;<input type="text" id = "email">&nbsp;
    年龄&nbsp;:&nbsp;<input type="text" id = "age">&nbsp;
</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>