使用DOM对表格进行增删

---恢复内容开始---

声明本文旨在练习dom 其中可以链接数据 或者使用ajax 实现的我全用的dom因为我在学dom。

一、 表格构建

 <section id="section_tableUser">

         <table id="myTable">
             <tbody>
                 <th colspan="4">
                     <font color="coral">用户管理系统</font>
                 </th>

                 <tr align="center">
                     <td class=" header check" id="checks"><input type="checkbox"  value="" /></td>
                     <td class="header">用户名</td>
                     <td class="header bigtd">地址</td>
                     <td class="header ">电话</td>
                     <td class="header remark">备注</td>

                 </tr>
                 <tr class="tr-one" id="row_1">
                     <td class="check" id="checks"><input type="checkbox" name="checks" value="1" /></td>
                     <td>Tom</td>
                     <td class="bigtd">济南市长清区大学路0001号</td>
                     <td >123789</td>
                     <td class="remark"></td>

                 </tr>
                 <tr class="tr-two" id="row_2">
                     <td class="check"  id="checks"><input type="checkbox" name="checks" value="2" /></td>
                     <td>Jack</td>
                     <td class="bigtd">北京市东城区前门大街0001号</td>
                     <td >123456</td>
                     <td></td>

                 </tr>
                 <tr class="tr-one" id="row_3">
                     <td class="check"  id="checks"><input type="checkbox" name="checks" value="3" /></td>
                     <td>Linda</td>
                     <td class="bigtd">南京市栖霞区玄武大道0001号</td>
                     <td >123678</td>
                     <td></td>

                 </tr>
                 <tr class="tr-two"id="row_4">
                     <td class="check"  id="checks"><input type="checkbox" name="checks" value="4" /></td>
                     <td>Maria</td>
                     <td class="bigtd">深圳市罗湖区深南东路0001号</td>
                     <td >123567</td>
                     <td></td>

                 </tr>
                 <tfoot>
                 <tr>
                     <td colspan="5">
                         <div id="crudOperation">
                             <button type="button" id="btnAddition">新增</button>
                         </div>
                         <div id="delOperation">
                             <button type="button" id="btnDelete">删除</button>
                         </div>
                         <div id="pageOperation">
                             <button type="button" style="margin:5px 1px;">1</button>
                             <button type="button" style="margin:5px 1px;">2</button>
                             <button type="button" style="margin:5px 1px;">3</button>
                             <button type="button" style="margin:5px 1px;">4</button>
                             <button type="button" style="margin:5px 1px;">5</button>
                             <input type="text" id="" style="width:15px"><button type="button"  style="margin:5px 1px;">go</button>
                         </div>
                     </td>
                 </tr>
             </tfoot>
             </tbody>

         </table>
         </section>

说明：css 我是单独写的我在这里就不再附加了 代码太多太乱

1.所有的input也就是选择框我用value="x"标注了从1往后推。

2.所有的 tr <tr class="tr-one" id="row_1">从数据行开始 row_xx

目的是方便dom操作。

二、数据删除

我的思路用上面的百度脑图都写出来了。

 /*感觉这是最贴心的注释了
   时间 ：17/08/05 

  */
 function dele(){

     var btnCheck=document.getElementsByName("checks");//获取所有选择框存在

     var isCheck ="";//设置一个变量赋空值
     btnCheck.forEach((item)=>{ //遍历我收集的选择框数据
         if(item.checked==true){  //checked 属性设置或返回 checkbox 是否应被选中。
             alert("确定要删除数据？");
             if(isCheck ==""){      //给isChenk赋值 值为value；
                 isCheck+=item.value
             }else{
                 isCheck = ",";
                 isCheck+=item.value;
             }
         }
     });
     if(isCheck==""){ //这个就是没有选择选择框
         alert("请选择要删除的数据");
     }else{
         if(confirm("确定删除吗？")){
                 let arrays=isCheck.split(","); //用，分割isCheck  split() 方法用于把一个字符串分割成字符串数组。
                 arrays.forEach((item)=>{
                 let index=document.getElementById("row_"+item).rowIndex; //获取下标 我建表已经表好了哈哈哈
                 document.getElementById("myTable").deleteRow(index); //deleteRow() 方法用于从表格删除指定位置的行
                 });

         }
     }
 }

 三、增加新的数据

 function add(){
     var userName = document.getElementById("add_username").value; //这个四个就是获取
     var address = document.getElementById("add_address").value;
     var phoneNumber = document.getElementById("add_phoneNumber").value;
     var remak = document.getElementById("add_remark").value;
     document.getElementById("section_tableUser").hidden=false; //表格显示
     document.getElementById("section_addUser").hidden.true; //表格隐藏
     let table=document.getElementById("myTable"); //获取原表格
     let len=table.rows.length; //获取表格长途
     let maxNumber=parseInt(table.rows[len-1].id.substring(4))+1;//获取插入row_xx这个xx
     let row=table.insertRow(len-1); //在len-1插入新的一行
     row.class= "add"; //行的类 我原本想添加样式的失败我回头学学
     row.id="row_"+maxNumber; //id

     let cell0=row.insertCell(0); //单元格第一个插入
     let input = document.createElement("input");//插入一个input 标签
     input.value=maxNumber; //input value
     input.type="checkbox";
     input.name="checks";
     cell0.appendChild(input); //下面 就是添加表格信息
     row.insertCell(1).innerHTML=userName;
     row.insertCell(2).innerHTML=address;
     row.insertCell(3).innerHTML=phoneNumber;
     row.insertCell(4).innerHTML=remak
     }

所有解释我写在注释里面

四、对按钮添加监听事件

同样写在注释里面

 function init(){
                 document.getElementById("add_btn_addUser").addEventListener("click",add,false); //增加按钮添加监听事件
                 document.getElementById("btnDelete").addEventListener("click",dele,false);//删除按钮添加监听事件
                 document.getElementById("btnAddition").addEventListener("click",()=>{ //提交按钮监听事件
                 document.getElementById("section_tableUser").hidden=true; //用户表隐藏
                 document.getElementById("section_addUser").hidden=false;//添加表显示
                 },false);

             }
             window.addEventListener("load",init,false); 

五、总结

①首先是监听事件.addEventListener("click",add,false); false是代表冒泡

addEventListener() 方法用于向指定元素添加事件句柄。

  提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

② forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

  注意: forEach() 对于空数组是不会执行回调函数的。

③ deleteRow() 方法用于从表格删除指定位置的行

④hidden 属性规定对元素进行隐藏。

隐藏的元素不会被显示。

如果使用该属性，则会隐藏元素。

可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。

⑤substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

⑥insertRow() 方法用于在表格中的指定位置插入一个新行。

⑦createElement() 方法通过指定名称创建一个元素

⑧appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

你可以使用 appendChild() 方法移除元素到另外一个元素。

⑨insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素

六 思维导图和demo

demo 这是个链接