JS学习笔记-列表的删除和增加-蒲公英云

JS学习笔记-列表的删除和增加

列表的删除和增加

1.HTML文件

我们在HTML中写入一个简单的学生信息表，这个表并没有用太多的样式，但是不影响结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div align="center">
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入姓名">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" value="添加" id="btn_add">        
        </div>
        <table border="" cellspacing="" cellpadding="" style="" align="center">
            <caption>学生信息表</caption>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>刘有义</td>
                <td>男</td>
                <td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>铁无情</td>
                <td>女</td>
                <td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>李中</td>
                <td>男</td>
                <td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
            </tr>
        </table>
    </body>
    <script src="js/add_delete.js"></script>
</html>

2.js文件

1）我们用面向对象的的js来写

//1.获取按钮
        document.getElementById("btn_add").onclick = function(){ 
            //获取文本框内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
            //创建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","javascript:void(0);");
            ele_a.setAttribute("onclick","delTr(this)");
            var text_a = document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_a.appendChild(ele_a);
            //创建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
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }
        function delTr(obj){ 
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

2）

我们用一个更简单的方法来写出相同的效果，获取table的innerHTML然后直接修改。

document.getElementById("btn_add").onclick = function(){ 
            //获取文本框内容
            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=\"javascript:void(0);\" οnclick=\"delTr(this)\">删除</a><td>\n" +
            "</tr>";
        }
        function delTr(obj){ 
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }