案例01-动态表格

最新推荐文章于 2024-07-20 10:36:53 发布

山东大葱

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量119

点赞数

分类专栏：案例文章标签： javascript webview html

本文链接：https://blog.csdn.net/shwjakak/article/details/123394674

版权

案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

    </style>
</head>
<body>
<div><input name="bianhao" type="text" id="number" placeholder="请输入编号">
    <input name="xingming" type="text" id="name" placeholder="请输入姓名">
    <input name="gender" type="text" id="gender" placeholder="请输入性别">
    <input type="button" name="tijiao" value="添加" id="tianjia">
</div>
<div>
    <table id="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="check(this)">删除</a></td>

        </tr>
        <tr>
            <td>02</td>
            <td>孔塞飞</td>
            <td>女</td>
            <td><a href="javascript:void(0)" onclick="check(this)">删除</a></td>

        </tr>
    </table>
    <script>
        var tianjia = document.getElementById("tianjia");
        tianjia.onclick=function(){
            var number = document.getElementById("number").value;
           var td_id = document.createElement("td");
           var text_id = document.createTextNode(number);
           td_id.appendChild(text_id);

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

            var gender = document.getElementById("gender").value;
            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","check(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.getElementById("table");
            table.appendChild(tr);

        };
       function check(a){
           var table = a.parentNode.parentNode.parentNode;
           var aa = a.parentNode.parentNode;
           table.removeChild(aa);
       }




    </script>
</div>

</body>
</html>

山东大葱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例01-动态表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> div{ text-align: center; margin-top: 50px; } table{ .
复制链接

扫一扫