12-12-12
posts - 397,comments - 0,views - 25332
案例4_动态表格_删除和HTMLDOM_innerHTML

删除

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
        <tr>
            <td>1</td>
            <td>是的</td>
            <td>男</td>
            <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>

        document.getElementById("btn_add").onclick = function () {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id)
            td_id.appendChild(text_id);

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

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

            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);



            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);

            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr)
        }
        
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
        
        
    </script>
</body>
</html>
复制代码

 

 

 

 

 

 

 

 

 

 

 

 

HTMLDOM_innerHTML

HTML DOM

标签体的设置和获取 ：innerHTML

使用html元素对象的属性

控制样式

 

 HTML

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
    <tr>
        <td>1</td>
        <td>是的</td>
        <td>男</td>
        <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>
    document.getElementById("btn_add").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        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;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
</script>
</body>
</html>
复制代码

 

 

 
 
posted on   淤泥不染  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
· DOM_Node对象和案例4_动态表格_添加
· 事件_常见事件演示和案例5_表格全选
· 案例4_动态表格_删除与HTMLDOM_innerHTML
· 案例4动态表格的删除和HTMLDOM的innerHTML
· HTMLDOM_innerHTML和HTMLDOM_样式控制
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Copyright © 2025 淤泥不染
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示