JS学习记录7， DOM增删改，员工添加删除功能的两种方式

DOM增删改

createElement()可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。

var li = document.createElement("li");

createTextNode()可以用来创建一个文本节点对象，需要将一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

var gzText = document.createTextNode("广州");

给两个节点设置关系，将gzText设为li的子节点。
appendChild()向一个父节点中添加一个新的子节点，用法：父节点.appendChild(字节点)

li.appendChild(gzText);

再按照此方法将li设置为ul的字节点，这样新增的广州就成功添加到页面中。
insertBefore()将指定子节点前面插入新的子节点，该方式要在父节点中设置。如果想将广州插入到北京前，先获取bj、li、city（为另外两个的父节点）语法：父节点.insertBefore(新节点,旧节点);

city.insertBefore(li,bj)；

replaceChild()可以使用新的子节点替换旧的子节点。语法：父节点.replaceChild(新节点,旧节点);

city.replaceChild(li,bj);

removeChlid()删除一个子节点。语法：父节点.removeChlid(子节点);

city.removeChlid(bj);

如果没有父元素，或是不想单独再获取父元素，可以先找到子节点的父元素再删除。语法：子节点.parentNode.removeChlid(子节点);

bj.parentNode.removeChlid(bj);

使用innerHTML()向父节点中添加子节点，也可以完成其他增删改查的操作。

city.innerHTML+ = ("<li>广州</li>");

一般会两种方式结合使用。

var li = document.createElement("li");
li.innerHTML =  ("广州");
city.appendChild(li);

员工添加删除功能的两种方式

//删除tr的单击响应函数
function delA() {
        //删除之前，弹出提示框
        //点击超链接之后需要删除超链接所在的那一行
        //响应函数给谁绑定的此时this就是谁
        //获取tr
        var tr = this.parentNode.parentNode;
        //获取要删除员工的名字
        var name = tr.getElementsByTagName("td")[0].innerHTML;
        /*
        *confirm()用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该参数将会作为提示语，如果用户点击确认返回true，点击取消返回false
         */
        var flag = confirm("确认删除吗？"+name);
        if(flag){
            //自删
            tr.parentNode.removeChild(tr);
        }
        /*
        点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
        此时不希望出现该默认行为，可以通过在响应函数的后面添加一个return false;
        */
        return false;
}
window.onload = function () {
     /*点击超链接之后删除一个员工信息*/
     //获取所有超链接
    var allA = document.getElementsByTagName("a");
    //为每一个超链接绑定一个单机响应
    for (var i = 0; i<allA.length;i++){
        allA[i].onclick = delA;
    }
    /*添加员工
            *点击按钮之后，将员工信息添加到表格中
            */
    //为提交按钮绑定单击响应
    var btn = document.getElementById("addEmpButton");
    btn.onclick = function () {
        //如果设置了表单要设置取消默认行为，但是没有设置表单，所以不用
        //获取员工信息
        var name = document.getElementById("empname").value;
        var email = document.getElementById("email").value;
        var salary = document.getElementById("salary").value;
        //方式一
        //需要将获取到的信息添加到一个tr中
        //var tr = document.createElement("tr");
        //创建四个td
        //var nameTd = document.createElement("td");
        //var emailTd = document.createElement("td");
        //var salaryTd = document.createElement("td");
        //var aTd = document.createElement("td");
        //创建一个a元素
        //var a = document.createElement("a");
        //创建文本节点
        //var nameText = document.createTextNode(name);
        //var emailText = document.createTextNode(email);
        //var salaryText = document.createTextNode(salary);
        //var delText = document.createTextNode("Delete");
        //将文本添加到td
        //nameTd.appendChild(nameText);
        //emailTd.appendChild(emailText);
        //salaryTd.appendChild(salaryText);
        //向a中添加文本
        //a.appendChild(delText);
        //将a添加到td中
        //aTd.appendChild(a);
        //将td到tr中
        //tr.appendChild(nameTd);
        //tr.appendChild(emailTd);
        //tr.appendChild(salaryTd);
        //tr.appendChild(aTd);
        //向a中添加herf属性
        //a.href = "javascript:;";
        //为新添加的a绑定一次单击响应函数
            //a.onclick = delA;
        //方式二
        //需要将获取到的信息添加到一个tr中
        var tr = document.createElement("tr");
        //设置tr的内容
        tr.innerHTML = "<td>"+name+"</td>"+
                       "<td>"+email+"</td>"+
                       "<td>"+salary+"</td>"+
                       "<td><a href = 'javascript:;'>Delete</a></td>";
        //通过tr找到a
        var a = tr.getElementsByTagName("a")[0];
        //为a绑定单击响应函数
        a.onclick = delA;
        //获取table
        var table = document.getElementById("employeeTable");
        //获取tbody
        var tobody = table.getElementsByTagName("tbody")[0];
        tobody.appendChild(tr);
    };
};

效果图：

CSS部分和HTML部分在CSS专栏中。

此为上方程序的一段代码，其中this若换成allA[i]便不能正常运行，为什么呢？

 var tr = this.parentNode.parentNode;

for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击后才执行，当响应函数执行时，for循环早已执行停止，所以此时的i会一直是3。