Fork me on GitHub

DOM给表格添加新一行和删除整个行的内容

 

DOM用appendChild()给表格添加新一行时，要注意，在HTML中没特别设置<thead>,<tbody>时，会自动添加上，所以要选择表格第一个元素在添加tr。

// 给表格中的tbody添加新tr
   table.firstElementChild.appendChild(tr);

 

用tr.remove() 和tr.parentNode.removeChild('tr')，效果是一样的。

// 用tr的父节点删除tr
   tr.parentNode.removeChild(tr);
// 用子节点删除本身
   tr.remove();

 

 给tr添加新的td的两种方式:

PlanA:

　//创建新td
　let td1 = document.createElement("td");
　let td2 = document.createElement("td");
　let td3 = document.createElement("td");
　let td4 = document.createElement("td");

// 给tr添加新td
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);

PlanB:

tr.innerHTML = '<td></td>'+
　　　　　　　　　'<td></td>'+
　　　　　　　　　'<td></td>'+
　　　　　　　　　'<td></td>';

 

 

 

 

代码实例:

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
                    #employee{
                        margin: 50px auto;
                        border-collapse: collapse;
                    }
                    
                    #employee td,
                    #employee th{
                        border: 1px solid black;
                        padding: 10px;
                    }
                    
                    form{
                        width: 400px;
                        margin: 0 auto;
                    }
                    
                    form div{
                        margin: 8px 0;
                        text-align: center;
                    }
                    
                </style>
    </head>
    <script>
　　　　　//创建超链接的删除函数
        function deleteA() {
            // 获取tr
            let tr = this.parentNode.parentNode;
            // 获取表格中姓名
            let name = tr.firstElementChild.innerHTML;
            // 循环体:确认是否删除这个姓名包括的所有信息
            if(confirm('确认删除'+name+'吗？')) {
                // 用tr的父节点删除tr
                tr.parentNode.removeChild(tr);
            }
            // 取消则返回不执行
            return false;
        }
        window.onload = function () {
            // 获取表格的超链接 a
            const links = document.getElementsByTagName('a');
            for (let i = 0; i < links.length; i++) {
                // 给每一个 a 添加点击事件
                links[i].onclick = deleteA; 
            }
            
            
            // 获取提交按钮
            const btn = document.getElementById('btn');
            // 给按钮添加点击事件
            btn.onclick = function () {
                // 获取要提交的姓名/邮箱/工资
                let name = document.getElementById('name').value;
                let email = document.getElementById('email').value;
                let salary = document.getElementById('salary').value;
            // 给表格新增一行
            let newTr = document.createElement("tr");
            　　　　//给新添加的tr添加td
　　　　　　　　　　 newTr.innerHTML = '<td>'+name+'</td>'+
                                    '<td>'+email+'</td>'+
                                    '<td>'+salary+'</td>'+
                                    '<td><a href="javascript:;">删除</a></td>';
　　　　　　　　//给获取新添加的 a ，添加点击事件
            const link = newTr.getElementsByTagName('a')[0];
            link.onclick = deleteA;
            // 获取表格
            let employee = document.getElementById('employee');
            // 给tbody添加新tr
            employee.firstElementChild.appendChild(newTr);
            }
        }
    </script>
    <body>
        <table id="employee">
                    <tr>
                        <th>姓名</th>
                        <th>邮件</th>
                        <th>薪资</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>孙悟空</td>
                        <td>swk@123.com</td>
                        <td>1000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>猪八戒</td>
                        <td>zbj@123.com</td>
                        <td>2000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>沙和尚</td>
                        <td>shs@123.com</td>
                        <td>3000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                </table>
                
                <!-- 创建一个表单 -->
                <form action="#">
                    <div>
                        姓名 <input id="name" type="text">
                    </div>
                    <div>
                        邮件 <input id="email" type="text">
                    </div>
                    <div>
                        薪资 <input id="salary" type="text">
                    </div>
                    <div>
                        <button id="btn" type="button">提交</button>
                    </div>
                </form>

    </body>
</html>

如果在form中的button 没有写type的值，那么会自动添加成 type="submit",页面会发生提交，若不想提交，就给button添加 type="button",或者在给button的函数添加一个返回值 false。

posted @ 2021-04-26 14:59  ༺Tu༒aimes༻  阅读(354)  评论(0)    收藏  举报