天天看点
返回

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

效果：

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

交流群：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>
jdk静态导入 jdbc执行SQL语句 idc云托管证书 udp编程套接字 创建账号类邮件
上一篇: IOS学习笔记十二(类别和扩展)
下一篇: 解决Mongoose 返回的文档过大导致模板引擎art-template无法渲染的问题，错误-RangeError: Maximum call stack size exceeded

继续阅读