动态表格添加、删除数据操作 案例:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>动态表格</title> 
    <style> 
        table{ 
            border: 1px solid red; 
            margin: auto; 
            width: 500px; 
        } 
        td,th{ 
            text-align: center; 
            border: 1px solid; 
        } 
        div{ 
            text-align: center; 
            margin: 50px; 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <input type="text" id="id" placeholder="请输入编号"> 
        <input type="text" id="name" placeholder="请输入姓名"> 
        <input type="text" id="gender" placeholder="请输入性别"> 
        <input type="button" id="btn_add" value="添加"> 
    </div> 
    <table> 
        <caption>学生信息表</caption> 
        <tr> 
            <td>编号</td> 
            <td>姓名</td> 
            <td>性别</td> 
            <td>操作</td> 
        </tr> 
 
        <tr> 
            <td>1</td> 
            <td>张三</td> 
            <td>男</td> 
            <td><a href="javascrpt:void(0)" onclick="delTr(this);">删除</a></td> 
        </tr> 
 
        <tr> 
            <td>2</td> 
            <td>李四</td> 
            <td>男</td> 
            <td><a href="javascrpt:void(0)" onclick="delTr(this);">删除</a></td> 
        </tr> 
 
        <tr> 
            <td>3</td> 
            <td>王五</td> 
            <td>女</td> 
            <td><a href="javascrpt:void(0)" onclick="delTr(this);">删除</a></td> 
        </tr> 
    </table> 
 
    <script> 
        /* 
            分析: 
                1.添加: 
                    1.给添加按钮绑定单击事件 
                    2.获取文本框的内容 
                    3.创建td,设置td的文本为文本框的内容 
                    4.创建tr 
                    5.将td添加到tr中 
                    6.获取table,将tr添加到table中 
                2.删除 
                    1.确定点击的是哪一个连接 
                        <a href="javascrpt:void(0)" onclick="delTr(this);">删除</a> 
                    2.怎么删除? 
                        removerChild():通过父节点,删除子节点 
         */ 
 
        //1.获取按钮 
        /*document.getElementById("btn_add").onclick = function () { 
            //2.获取文本框的内容 
            var id = document.getElementById("id").value; 
            var name = document.getElementById("name").value; 
            var gender = document.getElementById("gender").value; 
 
            //3.创建td,设置td的文本为文本框的内容 
            //id的td 
            var td_id = document.createElement("td"); 
            var text_id = document.createTextNode(id); 
            td_id.appendChild(text_id); 
            //name的td 
            var td_name = document.createElement("td"); 
            var text_name = document.createTextNode(name); 
            td_name.appendChild(text_name); 
            //gender的td 
            var td_gender = document.createElement("td"); 
            var text_gender = document.createTextNode(gender); 
            td_gender.appendChild(text_gender); 
            //a标签的td 
            var td_a = document.createElement("td"); 
            var ele_a = document.createElement("a"); 
            ele_a.setAttribute("href","javascrpt:void(0)"); 
            ele_a.setAttribute("onclick","delTr(this);"); 
            var text_a = document.createTextNode("删除"); 
            ele_a.appendChild(text_a); 
            td_a.appendChild(ele_a); 
 
            //4.创建tr 
            var tr = document.createElement("tr"); 
 
            //5.将td添加到tr中 
            tr.appendChild(td_id); 
            tr.appendChild(td_name); 
            tr.appendChild(td_gender); 
            tr.appendChild(td_a) 
 
            //6.获取table,将tr添加到table中 
            var table = document.getElementsByTagName("table")[0]; 
            table.appendChild(tr); 
        }*/ 
 
        //使用innerHTML添加 
        document.getElementById("btn_add").onclick = function () { 
            //2.获取文本框的内容 
            var id = document.getElementById("id").value; 
            var name = document.getElementById("name").value; 
            var gender = document.getElementById("gender").value; 
 
            //获取table 
            var table = document.getElementsByTagName("table")[0]; 
 
            //追加一行 
            table.innerHTML += "<tr>\n" + 
                "<td>"+id+"</td>\n" + 
                "<td>"+name+"</td>\n" + 
                "<td>"+gender+"</td>\n" + 
                "<td><a href=\"javascrpt:void(0)\" onclick=\"delTr(this);\">删除</a></td>\n" + 
                "</tr>"; 
        } 
        //删除方法 
        function delTr(obj) { 
            var table = obj.parentNode.parentNode.parentNode; 
            var tr = obj.parentNode.parentNode; 
            table.removeChild(tr); 
        } 
    </script> 
</body> 
</html>

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JavaScript>表格实现选框全选、全不选、反选操作且每行鼠标移进移出变色操作讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。