JavaScript制作动态表格，HTML动态表格，用table标签写一个表格，HTML中添加一个表格，HTML DOM 中 innerHTML 制作动态表格

最新推荐文章于 2024-02-04 11:24:04 发布

啊哈嗯嗯

最新推荐文章于 2024-02-04 11:24:04 发布

阅读量1.3k

点赞数 1

分类专栏：学以致用文章标签： javascript html css html5

本文链接：https://blog.csdn.net/weixin_44937336/article/details/105743738

版权

学以致用专栏收录该内容

7 篇文章 1 订阅

订阅专栏

在这里插入图片描述
更加动态一点的：https://blog.csdn.net/weixin_44937336/article/details/105753562

方式1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        input{
            border: 1px solid black;
            margin-right: 20px;
            height: 30px;
        }
        table{
            border: 1px solid black;
            width: 500px;
            margin: auto;
        }
        th,td{
            border: 1px solid black;
            text-align: center;
        }

    </style>
</head>
<body>

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

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

        <tr>
            <td>01</td>
            <td>杰克马</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

        <tr>
            <td>02</td>
            <td>花木兰</td>
            <td>女</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

        <tr>
            <td>03</td>
            <td>孙悟空</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

    </table>
    <script>
        //给按钮添加点击事件
        document.getElementById("add").onclick = function () {
            //获取输入框的值
            var id_text = document.getElementById("id").value;
            var name_text = document.getElementById("name").value;
            var sex_text = document.getElementById("sex").value;

            //把 id 要装进 td , 先创建 td 节点
            var td_id_node = document.createElement("td");
            //输入的值为文本，不是一个节点，要想通过节点添加，就要变为 文本节点
            var id_text_node = document.createTextNode(id_text);
            //添加 id 节点
            td_id_node.appendChild(id_text_node);

            //把 name 要装进 td , 先创建 td 节点
            var td_name_node = document.createElement("td");
            //输入的值为文本，不是一个节点，要想通过节点添加，就要变为 文本节点
            var name_text_node = document.createTextNode(name_text);
            //添加 name 节点
            td_name_node.appendChild(name_text_node);

            //把 sex 要装进 td , 先创建 td 节点
            var td_sex_node = document.createElement("td");
            //输入的值为文本，不是一个节点，要想通过节点添加，就要变为 文本节点
            var sex_text_node = document.createTextNode(sex_text);
            //添加 sex 节点
            td_sex_node.appendChild(sex_text_node);

            //把 删除 要装进 td , 但没有，所以先创建超链接 ,再添加 “删除” 文本节点
            var ele_a = document.createElement("a");
            //设置 href 属性
            ele_a.setAttribute("href","javascript:void(0);");
            //设置 onclick 属性
            ele_a.setAttribute("onclick","del_tr(this);");
            //把 删除 变成 文本节点
            var del_node = document.createTextNode("删除");
            //实现超链接
            ele_a.appendChild(del_node);
            //创建 td 节点
            var td_del_node = document.createElement("td");
            //添加 删除超链接
            td_del_node.appendChild(ele_a);

            //把 4个 td 添加进 tr ,tr没有 ,先创建 tr
            var tr_node = document.createElement("tr");
            //tr 添加 td
            tr_node.appendChild(td_id_node);
            tr_node.appendChild(td_name_node);
            tr_node.appendChild(td_sex_node);
            tr_node.appendChild(td_del_node);

            //table 添加 tr , 已有 table,要变为节点
            var table_node = document.getElementsByTagName("table")[0];
            table_node.appendChild(tr_node);
        }
        del_tr = function (obj) {//返回的是 a 标签的对象
            //通过父节点删除子节点
            //通过 table 删除 tr ,先获取 table节点
            var table_node = obj.parentNode.parentNode.parentNode;
            table_node.removeChild(obj.parentNode.parentNode);
        }
    </script>
</body>
</html>

方式2：（跟方式1不同之处在于使用了：innerHTML 来添加行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        input{
            border: 1px solid black;
            margin-right: 20px;
            height: 30px;
        }
        table{
            border: 1px solid black;
            width: 500px;
            margin: auto;
        }
        th,td{
            border: 1px solid black;
            text-align: center;
        }

    </style>
</head>
<body>

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

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

        <tr>
            <td>01</td>
            <td>杰克马</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

        <tr>
            <td>02</td>
            <td>花木兰</td>
            <td>女</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

        <tr>
            <td>03</td>
            <td>孙悟空</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
        </tr>

    </table>
    <script>
        //给按钮添加点击事件
        document.getElementById("add").onclick = function () {
            //获取输入框的值
            var id_text = document.getElementById("id").value;
            var name_text = document.getElementById("name").value;
            var sex_text = document.getElementById("sex").value;

           //使用 innerHTML 添加
            var table_node = document.getElementsByTagName("table")[0];
            //添加一行
            table_node.innerHTML += "       <tr>\n" +
                "            <td>"+id_text+"</td>\n" +
                "            <td>"+name_text+"</td>\n" +
                "            <td>"+sex_text+"</td>\n" +
                "            <td><a href=\"javascript:void(0);\" οnclick=\"del_tr(this);\">删除</a></td>\n" +
                "        </tr>";
        }
        del_tr = function (obj) {//返回的是 a 标签的对象
            //通过父节点删除子节点
            //通过 table 删除 tr ,先获取 table节点
            var table_node = obj.parentNode.parentNode.parentNode;
            table_node.removeChild(obj.parentNode.parentNode);
        }
    </script>
</body>
</html>