如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）

2022/2/8 22:17:00

编程Tag： javascript 表格 var text tr obj 一行 td document

本文主要是介绍如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
       <div>
           <input type="text" id="text1" placeholder="请输入编号">
           <input type="text" id="text2" placeholder="请输入姓名">
           <input type="text" id="text3" placeholder="请输入性别">
           <input type="submit" id="text4" value="添加">
       </div>

       <div>
           <p id="p1"> 学生信息表</p>
       </div>
       <div>
           <table id="table1" border = "1" width="40%" align="center" cellpadding="0" cellspacing="0">
               <tr>
                   <td> 编号 </td>
                   <td> 姓名 </td>
                   <td> 性别 </td>
                   <td> 操作 </td>
               </tr>

           </table>
       </div>
            <script>
                var text4 = document.getElementById("text4");
                text4.onclick = function () {
                    var text1 = document.getElementById("text1").value;
                    var text2 = document.getElementById("text2").value;
                    var text3 = document.getElementById("text3").value;

                    var obj = document.getElementById("table1").insertRow();
                    obj.insertCell(0).innerHTML = text1;
                    obj.insertCell(1).innerHTML = text2;
                    obj.insertCell(2).innerHTML = text3;
                    obj.insertCell(3).innerHTML = "<a href='#' onclick='del(this)' id='del'> 删除</a>";
                }

               function del(obj) {
                    var node = obj.parentNode.parentNode.parentNode;//代表表格
                    var node1 = obj.parentNode.parentNode;//代表行
                    node.removeChild(node1);
                }
            </script>

</body>
</html>

2.方法二：使用JavaScript里面的DOM的各种对象，通过appendChild（）方法（向节点的子节点列表的结尾添加新的子节点）插入新1的一行，使用table.removeChild(tr)删除一行，具体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <a href="javascript:void(0);" onclick="deltr(this);"></a>

    <script>
        document.getElementById("btn_add").onclick = function () {
            //2.获取文本框的内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            //3.创建td，赋值td的标签体
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);

            //name的td
            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            //gender的td
            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);

            //a标签的td
            var td_a = document.createElement("td");
            var ele_a = document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","deltr(this);");
            var text_a = document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);

            //4.创建tr
            var tr = document.createElement("tr");
            //5.添加td到tr中
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);
            //6.获取table
            var table = document.getElementsByTagName("table")[0];//返回的是数组
            //7.添加tr到table
            table.appendChild(tr);
        }

        //删除：
        //1.确定点击的是哪一个超链接
            //<a href="javascript:void(0);" onclick="deltr(this);"></a>
        //2.如何删除

        function deltr(obj) {//obj是形参，接收this的，this代表是a标签
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

    </script>

</table>

</body>
</html>

这篇关于如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）

相关编程文章