美文网首页
JS实现动态表格小案例

JS实现动态表格小案例

作者: 一枚小菜 | 来源:发表于2020-02-17 21:26 被阅读0次

    一.分析


    1.添加:

        1.给添加按钮绑定单击事件

        2.获取文本框的内容

        3.创建td,设置td的文本为文本框的内容

        4.创建tr

        5.将td添加到tr中

        6.获取table,将tr添加到table中

    2.删除:

        1.确定点击的是哪一个超链接

            <a href="javascript:void(0);" onclick="delTr(this);">删除</a>

        2.怎么删除?

            removeChild():通过父节点删除子节点

    二.实例代码


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>动态表格</title>

    <style>

    div{

    text-align: center;

    margin: 50px;

    }

    table{

    border: 1px solid;

    margin: auto;

    width: 600px;

    }

    th,td{

    border: 1px solid;

    text-align: center;

    }

    </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>

    <th>编号</th>

    <th>姓名</th>

    <th>性别</th>

    <th>操作</th>

    <tr>

    <tr>

    <td>1</td>

    <td>张三</td>

    <td>男</td>

    <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>

    </tr>

    <tr>

    <td>2</td>

    <td>李四</td>

    <td>男</td>

    <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>

    </tr>

    <tr>

    <td>3</td>

    <td>王五</td>

    <td>女</td>

    <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>

    </tr>

    </table>

    <script>

    //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", "javascript: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

    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);

    }

    </script>

    </body>

    </html>

    三.实现效果


    1.添加一条信息

    2.删除一条信息

    其实使用innerHTML步骤会更加简单

    使用innerHTML获取标签体

    相关文章

      网友评论

          本文标题:JS实现动态表格小案例

          本文链接:https://www.haomeiwen.com/subject/ahcgfhtx.html