案例_动态表格-添加、删除

案例_动态表格-添加、删除

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

    <style>
        table{
            /*边框1 实线*/
            border: 1px solid;

            /*居中*/
            margin: auto;

            /*宽500*/
            width: 500px;
        }

        td,th{
            /*居中*/
            text-align: center;

            /*边框，实线*/
            border: 1px solid;
        }
        div{

            /*居中*/
            text-align: center;

            /*距离50*/
            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>

    <!-- 定义行-->
    <tr>
        <!-- 定义单元格-->
        <td>1</td>

        <!-- 定义单元格-->
        <td>令狐冲</td>

        <!-- 定义单元格-->
        <td>男</td>

        <!-- 定义单元格 a标签，超链接，删除-->
        <td><a href = "javascript:void(0);" onclick = "delTr(this);">删除</a></td>
    </tr>

    <!-- 定义行-->
    <tr>
        <!-- 定义单元格-->
        <td>2</td>

        <!-- 定义单元格-->
        <td>任我行</td>

        <!-- 定义单元格-->
        <td>男</td>

        <!-- 定义单元格 超链接 ，删除-->
        <td><a href = "javascript:void(0);" onclick = "delTr(this);">删除</a></td>
    </tr>

    <!-- 定义行-->
    <tr>
        <!-- 定义单元格-->
        <td>3</td>

        <!-- 定义单元格-->
        <td>岳不群</td>

        <!-- 定义单元格-->
        <td>?</td>

        <!-- 定义单元格 删除超链接-->
        <td><a href = "javascript:void(0);" onclick = "delTr(this);" >删除</a></td>
    </tr>


</table>


<script>
    /*
        分析：
            1.添加：
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td，设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
                2.怎么删除？
                    removeChild():通过父节点删除子节点

     */



   //使用innerHTML添加
    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;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行  添加一行文本
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }


    //删除方法
    function delTr(obj){

        //删除方法
        var table = obj.parentNode.parentNode.parentNode;

        //以Node对象的形式返回指定节点的父节点，如果指定节点没有父节点就返回null
        var tr = obj.parentNode.parentNode;

        //删除
        table.removeChild(tr);
    }


</script>

</body>
</html>
复制代码

 

posted @   漁夫  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
· 案例-表格全选、表单检验
· DDL-操作表-创建和DDL操作表-删除
· 640 案例4_动态表格_添加 and 案例4_动态表格_删除 641
· JS动态表格添加数据删除
· 事件_常见事件演示和案例5_表格全选
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示