A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 老成 初级黑马   /  2019-6-1 15:53  /  749 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

用面向对象的思想做一个有增删表格的页面,主要使用的知识是DOM,涉及到的对象有Document、ElementNode、TextNode, 涉及到的方法有appendChild和removeChild,对表格样式也做了修改。


[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <title>表格增删</title>
    <style>
        *{
            font-size: 15px;
            text-align: center;
        }
        table{
            border: black solid 1px;
            margin: 10% auto auto auto;
            border-spacing: 0px;

        }
        input{
            height: 30px;
            padding-left: 5px;
            text-align: left;
        }
        td{
            border: black solid 1px;
            padding: 0px;
            height: 30px;

        }

    </style>

</head>

<body>
    <table >
        <tr>
            <td><input type="text" id="id" placeholder="输入id">  </td>
            <td><input type="text" id="name" placeholder="输入姓名">  </td>
            <td><input type="text" id="gender" placeholder="输入性别">  </td>
            <td><input type="button" id="add" value="添加"> </td>
        </tr>
    </table>
    <table>
        <tr>
            <td width="80">id</td>
            <td width="150px">name</td>
            <td width="80px">gender</td>
            <td width="80px"> 删除</td>
        </tr>
        <tr>
            <td>01</td>
            <td>新恒结衣</td>
            <td>女</td>
            <td> <a href="javascript:void(0);"  > 删除 </a>  </td>
        </tr>
        <tr>
            <td>02</td>
            <td>朴宝英</td>
            <td>女</td>
            <td> <a href="javascript:void(0);" >删除  </a>  </td>
        </tr>
    </table>

<script>
    function add() {
        var id = document.getElementById("id").value;
        var ele_id = document.createTextNode(id);
        var name = document.getElementById("name").value;
        var ele_name = document.createTextNode(name);
        var gender = document.getElementById("gender").value;
        var ele_gender = document.createTextNode(gender);
        var ele_anchor = document.createElement("a");
        ele_anchor.href = "javascript:void(0)";
        ele_anchor.onclick= function () {
            del(ele_anchor)
        };
        var text = document.createTextNode("增删");
        ele_anchor.appendChild(text);
        var ele_tr = document.createElement("tr");
        var td01 = document.createElement("td");
        var td02 = document.createElement("td");
        var td03 = document.createElement("td");
        var td04 = document.createElement("td");
        td01.appendChild(ele_id);
        td02.appendChild(ele_name);
        td03.appendChild(ele_gender);
        td04.appendChild(ele_anchor);
        ele_tr.appendChild(td01);
        ele_tr.appendChild(td02);
        ele_tr.appendChild(td03);
        ele_tr.appendChild(td04);
        var ele_table = document.getElementsByTagName("table")[1];
        ele_table.appendChild(ele_tr);
    }
    document.getElementById("add").onclick = add;

   function del(obj) {
       var ele_tr = obj.parentElement.parentElement;
       var ele_table = obj.parentElement.parentElement.parentElement;
       ele_table.removeChild(ele_tr);
   }


</script>

</body>
</html>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马