javascript实现表格信息增添与删除

JavaScript入门

JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题，这是一个js入门的小练习

对于表格信息的增添与删除

简单的DOM操作htML标签即可实现，代码如下：

!DOCTYPE html>
    html lang="en">
    head>
     meta charset="UTF-8">
     tITle>
    Document/title>
     style type="text/css">
  *{
       margin: 0;
       padding: 0;
  }
     /style>
     script type="text/javascript">
  function delA(){
         //点击超链接删除那一行     //使用this，删除父级元素     VAR tr = this.parentNode.parentNode;
          //获取要删除人员的名字     var name=tr.getelementsbytagname("td")[0].innerHTML;
         //提示用户是否删除     var flag=confirm("是否删除"+name+"？");
          if(flag){
          tr.parentNode.removeChild(tr);
     }
         //阻止浏览器默认行为，比如弹出新的标签页     return false;
    }
  window.onload=function(){
       //点击超链接删除一个员工信息   //获取链接   var allA=document.getElementsByTagName("a");
       //绑定响应函数   for(var i=0;
    iallA.length;
i++){
        allA[i].onclick=delA;
   }
       //添加员工功能,点击按钮将信息添加到表格中   var addEmpButton = document.getElementById("addEmpButton");
   addEmpButton.onclick=function(){
        //获取输入框中的文本内容    var empName=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>
    "+empName+"/td>
    "+        "td>
    "+email+"/td>
    "+        "td>
    "+salary+"/td>
    "+        "td>
    a href='javascript:;
    '>
    Delete/a>
    /td>
    ";
         var a= tr.getElementsByTagName("a")[0];
         a.onclick=delA;
        //把tr放在table中    var employeeTable=document.getElementById("employeeTable");
        //获取tbody    var tbody=document.getElementsByTagName("tbody")[0];
         tbody.appendChild(tr);
   }
  }
     /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="">
    Delete/a>
    /td>
      /tr>
      tr>
       td>
    Jerry/td>
       td>
    jerry@sohu.com/td>
       td>
    8000/td>
       td>
    a href="">
    Delete/a>
    /td>
      /tr>
      tr>
       td>
    Bob/td>
       td>
    bob@tom.com/td>
       td>
    10000/td>
       td>
    a href="">
    Delete/a>
    /td>
      /tr>
      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">
     !--colspan和rowspan属性是单元格可横跨的行数和列数-->
          !--align属性是文本对齐位置-->
          button id="addEmpButton" value="abc">
           Submit      /button>
         /td>
        /tr>
       /table>
      /div>
     /table>
    /body>
    /html>
    

代码片段里注释非常清楚，适合拿来练练手。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• @L_304_0@
• JS对HTML表格进行增删改操作
• JavaScript获取表格（table）当前行的值、删除行、增加行
• Vue.js实现表格动态增加删除的方法（附源码下载）
• AngularJS实现表格的增删改查（仅限前端）
• 纯原生js实现table表格的增删
• javascript实现动态增加删除表格行(兼容IE/FF)
• js操作table元素实现表格行列新增、删除技巧总结
• 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
• JavaScript实现动态增删表格的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！