动态表格：基于DOM模型实现

最新推荐文章于 2021-06-05 01:39:06 发布

LiuszZZ

最新推荐文章于 2021-06-05 01:39:06 发布

阅读量175

点赞数 1

分类专栏： Java Web

原文链接：http://www.itheima.com/

版权

Java Web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

HTML界面

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>动态表格</title>
     <style>
       table {
         border: 1px solid;
         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" value="添加" id="btn_add" />
     </div>
     <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>
     </div>
   </body>
 </html>

添加方法

给添加按钮绑定单击事件
创建td，设置td的文本为文本框的内容。
将td添加到tr中，tr添加到table中

第一种方法：通过核心DOM完成

 <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");
         // 创建a标签
         var ele_a = document.createElement("a");
 
         // 4.创建 tr
         var tr = document.createElement("tr");
 
         // 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);
 
         // 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);
 
     }
         
 </script>

第二种方法：使用 HTML DOM 的 innerHTML 添加表格

 <script>
     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=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
             "    </tr>";
 
     }
 </script>

删除方法

确定点击的是哪一个超链接
怎么删除：removeChild():通过父节点删除子节点

代码：

<script>
    function delTr(obj) {
        // 将超链接的对象当做参数传入
        //alert(obj);
        // table -- tr -- td -- a
        var table = obj.parentNode.parentNode.parentNode;
        // tr -- td -- a
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }
</script>