javascript实现表格的添加和删除

最新推荐文章于 2022-11-26 08:37:51 发布

imxietx

最新推荐文章于 2022-11-26 08:37:51 发布

阅读量1.1k

点赞数

分类专栏： WEB开发文章标签： javascript 添加表格删除表格绑定函数

本文链接：https://blog.csdn.net/Artprog/article/details/52403811

版权

WEB开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注意window.onload()会在网页完成加载后立即执行，我们可以在这个时候为一些元素绑定一些事件响应函数，而一般的函数调用可以写在window.load()函数之外。

代码很简单：

<!DOCTYPE html>
<html>
  <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
      window.οnlοad=function(){
        // 为每一行绑定onmouseover和onmouseout事件的响应函数
        var trs = document.getElementsByTagName("tr");
        for(var i=0; i<trs.length; ++i){
          trs[i].οnmοuseοver=function(){
            this.style.backgroundColor="#f2f2f2";
          }
          trs[i].οnmοuseοut=function(){
            this.style.backgroundColor="#fff";
          }
        }
        //为按钮绑定onclick的响应事件
        var btn = document.getElementById("add");
        btn.onclick = function(){
          var tb = document.getElementById("table");
          var tr = document.createElement("tr");
          tr.innerHTML = "<tr><td>xh001</td><td>王小明</td><td><a href='javascript:;' οnclick='delrow(this)'>删除</a></td></tr>";
          tr.οnmοuseοver=function(){
             this.style.backgroundColor="#f2f2f2";
           }
          tr.οnmοuseοut=function(){
            this.style.backgroundColor="#fff";
          }
          tb.appendChild(tr);
        }
      }
      //删除某行
      function delrow(obj){
          var parent = obj.parentNode.parentNode.parentNode;
          var tr = obj.parentNode.parentNode;
          parent.removeChild(tr);
      }
    </script>
  </head>
  <body>
    <table border="1" width="50%" id="table">
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" οnclick="delrow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
      </tr>
      <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" οnclick="delrow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
      </tr>
    </table>
    <script type="text/javascript">
    </script>
    <input id="add" type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
  </body>
</html>