JavaScript操作DOM对象（赠删表格中的元素）

Posted 2020-12-10 gnos
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript操作DOM对象（赠删表格中的元素）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE >
<html>
<head>
<meta charset=UTF-8">
<title>DOM增删表格中的元素</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
    window.onload = function(){
        
        function aDelete(){
            //获取tr元素节点
            var trEle = this.parentNode.parentNode;
            //获取td元素节点
            var tdEle=trEle.getElementsByTagName("td");
            //获取每条记录中的name
            var name=tdEle[0].innerHTML;
            //弹出确认删除框  
               var flag=confirm("确定删除"+name+"吗？");
            //删除tr元素节点
            if(flag){
                trEle.parentNode.removeChild(trEle);
            }
            return false;
        }
        //删除操作
            //获取对象按钮
         var  aEle=document.getElementsByTagName("a");
        for(var i =0;i<aEle.length;i++){
            aEle[i].onclick=aDelete;
            
        }
        
        //添加操作
        //获取提交按钮
        
             /*1.给sumbit绑定单机事件*/
        var  addEmpButton=document.getElementById("addEmpButton");
        addEmpButton.onclick=function(){
             
             /*2.获取用户在表单中输入的内容*/
        var  empNameText =document.getElementById("empName").value;
        var  emailText =document.getElementById("email").value;
        var  salaryText =document.getElementById("salary").value;
            
            /*3.根据文本内容创建节点*/
        var  nmText =document.createTextNode(empNameText);
        var  emText =document.createTextNode(emailText);
        var  slText =document.createTextNode(salaryText);
        var  dlText=document.createTextNode("Delete");
            //创建a元素节点
        var  aEle =document.createElement("a");
         aEle.href="#";
         aEle.onclick=aDelete;
                 
            /*4：创建对应的td元素节点*/
         var  nmTd =document.createElement("td");
         var  emTd =document.createElement("td");
         var  slTd =document.createElement("td");
         var  dlTd =document.createElement("td");
                 
                 
             /* 5：td和文本节点组装（在创建最后一个td的时候里面还需要有a元素节点并且需要组装）*/
         nmTd.appendChild(nmText);
         emTd.appendChild(emText);
         slTd.appendChild(slText);
                  
         aEle.appendChild(dlText)
         dlTd.appendChild(aEle)
             
             /*6：创建tr节点，并且需要和td组装*/
         var  trEle =document.createElement("tr");
         trEle.appendChild(nmTd);
         trEle.appendChild(emTd);
         trEle.appendChild(slTd);
         trEle.appendChild(dlTd);
          
          /*7.将tr与table组装*/
         var  tableEle =document.getElementById("employeeTable");
             tableEle.appendChild(trEle);
        }
        
    };
    
 </script>
</head>
<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
    
        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

    </div>

</body>
</html>