JS增删改

最新推荐文章于 2023-09-15 11:36:57 发布

❀XXH❀

最新推荐文章于 2023-09-15 11:36:57 发布

阅读量139

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/xxhsym/article/details/104634422

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<script>
  window.onload=function(){
  var allA=document.getElementsByTagName("a");
  var th=document.getElementsByTagName("th");
  for(var i=0;i<allA.length;i++)
  {
  allA[i].onclick=function(){
  var tr=this.parentNode.parentNode
  var name=tr.getElementsByTagName("th")[0].innerHTML;

  var flag=confirm("确认删除"+name+"吗？");
  alert(flag);
  if(flag){
    tr.parentNode.removeChild(tr);
  }
  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;
  //创建tr节点
  var tr=document.createElement("tr");
  //设置tr中的内容
  tr.innerHtml="<td>"+name"</td>"+
               "<td>"+email"</td>"+
               "<td>"+salary"</td>"+
               "<td><aherf='javascript:;'>Delete</a></td>";
  
 
  }
  }
  </script>


<body>
 <table  border="1" cellspacing="0" cellpadding="0";id="employeeTable">
 <tr>
 <th>Name</th>
 <th>Email</th>
 <th>Salary</th>
 <th>&nbsp;</th>
 </tr> 
 <tr>
 <th>Tom</th>
 <th>Tom@tom.com</th>
 <th>5000</th>
 <th><a href="#">delete</a></th>
 </tr> 
 <tr>
 <th>Slara</th>
 <th>Slara@tom.com</th>
 <th>4000</th>
 <th><a href="javascript:;">delete</a></th>
 </tr> 
 <tr>
 <th>Sun</th>
 <th>Sun@tom.com</th>
 <th>6000</th>
 <th><a href="javascript:;">delete</a></th>
 </tr> 
 </table>
 <div id="formDiv">
 <h2>添加员工</h2>
 <table border="1" cellspacing="0" cellpadding="0">
 <tr>
 <th class="word">name:</th>
 <th class="inp">
 <input type="text" name="empName" id="empName">
 </th>
 </tr>
 <tr>

```javascript
 <th class="word">email:</th>
 <th class="inp">
 <input type="text" name="email" id="email">
 </th>
 </tr>
 <tr>
 <th class="word">salary:</th>
 <th class="inp">
 <input type="text" name="salary" id="salary">
 </th>
 </tr>
 <tr>
 <th colspan="2" align="center">
 <button id="addEmpButton">提交</button>                                                     
 </tr>
 </table>
 </div>
  </body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200303160102133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4aHN5bQ==,size_16,color_FFFFFF,t_70)

❀XXH❀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS增删改

<script> window.onload=function(){ var allA=document.getElementsByTagName("a"); var th=document.getElementsByTagName("th"); for(var i=0;i<allA.length;i++) { allA[i].onclick=funct...
复制链接

扫一扫

专栏目录