静态网页：通讯录增删隔行变色重新编号-阿里云开发者社区

静态网页：通讯录增删隔行变色重新编号

2021-12-16 115

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 静态网页：通讯录增删隔行变色重新编号

效果：

交流群：970353786

布局代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                /* border: 1px solid black; */
                margin: 0px auto;
            }
            table{
                width: 100%;
            }
            caption{
                font-size: 40px;
            }
            table tr{
                height: 40px;
                font-size: 20px;
            }
            tbody td{
                text-align: center;
            }
            #box>button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
        </style>
  </head>
  <body>
        <div id="box">
            <table border="1" cellspacing="0" cellpadding="0">
                <caption>通讯录</caption>
                <thead>
                    <tr><th>编号</th><th>姓名</th>
                    <th>电话</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
                    <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
                </tbody>
            </table>
            <button type="button">添加新行</button>
        </div>
  </body>
</html>

删除功能代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                /* border: 1px solid black; */
                margin: 0px auto;
            }
            table{
                width: 100%;
            }
            caption{
                font-size: 40px;
            }
            table tr{
                height: 40px;
                font-size: 20px;
            }
            tbody td{
                text-align: center;
            }
            #box>button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
        </style>
  </head>
  <body>
        <div id="box">
            <table id="mytable" border="1" cellspacing="0" cellpadding="0">
                <caption>通讯录</caption>
                <thead>
                    <tr><th>编号</th><th>姓名</th>
                    <th>电话</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
                    <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
                </tbody>
            </table>
            <button id="addNewLineBtn" type="button">添加新行</button>
        </div>
  </body>
    <script type="text/javascript">
        //01-静态布局
        var table = document.getElementById("mytable")
        var addNewLineBtn = document.getElementById("addNewLineBtn")
        //02-添加新行
        addNewLineBtn.onclick = function(){
            var tr = document.createElement("tr");
            table.tBodies[0].appendChild(tr);
            var rowCount = table.tBodies[0].rows.length;
            console.log(rowCount);
            for (var i = 0;i < 4;i++) {
               var td = document.createElement("td");
               tr.appendChild(td);
               if (i == 0 ) {
                   td.innerText = rowCount
               }
               if (i == 3 ) {
                   td.innerHTML = '<button type="button">删除</button>'
               }
            }
            // delLine();
        }
        //03-删除一行
        //方法一
        // delLine();
        // function delLine(){
        //     var allDeleteBtns = table.tBodies[0].getElementsByTagName("button")
        //     for (var i = 0; i < allDeleteBtns.length; i++) {
        //         allDeleteBtns[i].onclick = function(){
        //            table.tBodies[0].removeChild(this.parentNode.parentNode)
        //         }
        //     }
        // }
        //方法二：事件代理
        table.tBodies[0].onclick = function(ev){
            console.log(ev.target);//获取单击的元素
            if (ev.target.type == "button") {
                this.removeChild(ev.target.parentNode.parentNode)
            }
        }
    </script>
</html>

添加功能代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                /* border: 1px solid black; */
                margin: 0px auto;
            }
            table{
                width: 100%;
            }
            caption{
                font-size: 40px;
            }
            table tr{
                height: 40px;
                font-size: 20px;
            }
            tbody td{
                text-align: center;
            }
            #box>button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
        </style>
  </head>
  <body>
        <div id="box">
            <table id="mytable" border="1" cellspacing="0" cellpadding="0">
                <caption>通讯录</caption>
                <thead>
                    <tr><th>编号</th><th>姓名</th>
                    <th>电话</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
                    <tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
                </tbody>
            </table>
            <button id="addNewLineBtn" type="button">添加新行</button>
        </div>
  </body>
    <script type="text/javascript">
        //01-静态布局
        var table = document.getElementById("mytable")
        var addNewLineBtn = document.getElementById("addNewLineBtn")
        //02-添加新行
        addNewLineBtn.onclick = function(){
            var tr = document.createElement("tr");
            table.tBodies[0].appendChild(tr);
            var rowCount = table.tBodies[0].rows.length;
            console.log(rowCount);
            for (var i = 0;i < 4;i++) {
               var td = document.createElement("td");
               tr.appendChild(td);
               if (i == 0 ) {
                   td.innerText = rowCount
               }
               if (i == 3 ) {
                   td.innerHTML = '<button type="button">删除</button>'
               }
            }
        }
    </script>
</html>

静态网页：通讯录增删隔行变色重新编号

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

静态网页：通讯录增删隔行变色重新编号

热门文章

最新文章

相关电子书