使用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="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 这是个链接