js实现添加删除记录

在这里插入图片描述

在这里插入代码片
	 <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@tom.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>
                       <input type="text" name="empName" id="empName">
                   </td>
               </tr>
               <tr>
                    <td class="word">Email:</td>
                    <td>
                        <input type="text" name="email" id="email">
                    </td>
                </tr>
                <tr>
                    <td class="word">Salary:</td>
                    <td>
                        <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>
在这里插入代码片
  window.onload=function(){
      /*
        点击超链接以后,删除一个员工的信息
      */
      //获取所有额外超链接
      var allA=document.getElementsByTagName("a");
      for( var i=0;i<allA.length;i++){
          allA[i].onclick=function(){      
            
              
              var tr=this.parentNode.parentNode;
              var name=tr.getElementsByTagName("td")[0].innerHtml;
              //var name=tr.children[0].innerHtml;
             var flag= confirm("确认删除"+name+"吗?");
             if(flag){
              tr.parentNode.removeChild(tr);
            }
              /*
              点击超链接以后页面会跳转,,如果不想出现,
              可以通过在响应函数的最后 return false来取消默认事件
              */
             return false;
          };
      }
      /*
      点击按钮后添加到表格中
      */
      var addEmpButton=document.getElementById("addEmpButton")
      addEmpButton.onclick=function(){
         var name=document.getElementById("empName").value;
         var email=document.getElementById("email").value;
         var salary=document.getElementById("salary").value;


         var tr=document.createElement("tr")

         var nameTd=document.createElement("td")
         var emailTd=document.createElement("td")
         var salsryTd=document.createElement("td")
         var aTd=document.createElement("td")

         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");

         nameTd.appendChild(nameText);
         emailTd.appendChild(emailText);
         salaryTd.appendChild(salaryText);

         a.appendChild(delText)
         aTd.appendChild(a)


         tr.appendChild(nameTd)
         tr.appendChild(emailTd)
         tr.appendChild(salaryTd)
         tr.appendChild(aTd)

         a.href="javascript:;";
         

         var employeeTable=document.getElementById("employeeTable")

        var tbody= employeeTable.getElementsByTagName("tbody")[0];
         tbody.appendChild(tr)


      }
  }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值