DOM JS实现动态表格

最新推荐文章于 2021-06-22 22:04:30 发布

DeepSea.QQ

最新推荐文章于 2021-06-22 22:04:30 发布

阅读量149

点赞数

AngrySea.JJ

本文链接：https://blog.csdn.net/zhanghai412/article/details/105719785

版权

<!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 id="student">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delInfo(this)">删除</a></td>
    </tr>
    <script>
        function addInfo() {
            //1.获取表单里的数据
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
            //创建td1，并向td1中写放表单中的数据
            var td1 = document.createElement("td");
            //创建文件节点，并向其中添加内容
            var idText = document.createTextNode(id);
            td1.appendChild(idText);
            //创建td2，并向td2中写放表单中的数据
            var td2 = document.createElement("td");
            //创建文件节点，并向其中添加内容
            var nameText = document.createTextNode(name);
            td2.appendChild(nameText);
            //创建td3，并向td3中写放表单中的数据
            var td3 = document.createElement("td");
            //创建文件节点，并向其中添加内容
            var genderText = document.createTextNode(gender);
            td3.appendChild(genderText);
            //创建td4，并向td4中写删除按钮
             var td4 = document.createElement("td");
             //创建<a>
            var ele_a = document.createElement("a");
            //设置单击，而不跳转
            ele_a.setAttribute("href","javascript:void(0);");
            //设置单击事件
            ele_a.setAttribute("onclick","delInfo(this)");
            //设置文本节点
            var scText = document.createTextNode("删除");
            ele_a.appendChild(scText);
            td4.appendChild(ele_a);
            //创建Tr ,向Tr 中添加td
            var tr = document.createElement("tr");
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            //获取table 向table中添加 tr
            var table = document.getElementById("student");
            table.appendChild(tr);
        }
        //获取提交按钮，设置单击事件
        var addButten = document.getElementById("btn_add");
        addButten.onclick = addInfo;
        //定义一个删除函数
        function delInfo(obj) {
            //a->td->tr->table
            var table = obj.parentNode.parentNode.parentNode;
            //a->td->tr
            var tr = obj.parentNode.parentNode;
            //父类调用方法，删除子节点
            table.removeChild(tr);

        }

    </script>

</table>

</body>
</html>

DeepSea.QQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM JS实现动态表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { border: 1px solid; ...
复制链接

扫一扫