课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

完整代码如下，其实还能进一步优化功能，懒得写了。。。

来源：9-22 编程练习

蝉时雨丶0909

2019-02-17 21:27

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   

  <script type="text/javascript"> 

  

      window.onload = function(){

          var trArray=document.getElementsByTagName("tr");

          for(var i=0;i<trArray.length;i++){

              changeTr(trArray[i]);

          }      

      }

      

      function changeTr(theTr){

          theTr.onmouseover=function(){

              this.style.backgroundColor="#f2f2f2";

          }

          theTr.onmouseout=function(){

              this.style.backgroundColor="#fff";

          }

      }

      var num=2;

      function addTr(){

          num++;

          var newTr=document.createElement("tr");

          var xh=document.createElement("td");

          var xm=document.createElement("td");

          xh.innerHTML="xh00"+num;

          xm.innerHTML="第"+num+"学生";

          var del=document.createElement("td");

          del.innerHTML="<a href='javascript:void(0);' onclick='delTr(this)'>删除</a>";

          newTr.appendChild(xh);

          newTr.appendChild(xm);

          newTr.appendChild(del);

          var tableNode=document.getElementById("table");

          tableNode.appendChild(newTr);

          var tr = document.getElementsByTagName("tr");

          for(var i= 0;i<tr.length;i++)     //重新给新的tr元素添加鼠标移入移出事件

          {

              changeTr(tr[i]);

          }

      }


      function delTr(obj){

        var pobj = obj.parentNode.parentNode;

        pobj.parentNode.removeChild(pobj);

      }



  </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:;" onclick="delTr(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>


   <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="delTr(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>  


   </table>

   <input type="button" value="添加一行" onclick="addTr()"/>   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


写回答 关注

3回答

  • 慕用4091213
    2019-03-08 17:29:57
    已采纳

    thank you

    0 0
  • weibo_謝楊暘要飞到温暖的南_0
    2019-03-15 17:24:59

    请问onclick="delTr(this)"为什么要用this呢

    0 0
  • 精慕门7449067
    2019-03-15 16:44:00

    给新的元素添加鼠标移入移出事件没必要再用循环吧

    1 0

    Silent...

    这样也可以的

    2019-03-19 13:47:40

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

为啥我的代码就不能实现功能？

回答 3

使用运动框架为什么实现不了borderWidth 的变化功能，请高手指点。代码如下：

回答 1

完整代码！！

回答 1

添加一行功能实现不了

回答 3

代码完整版

回答 3

打开慕课网App查看更多内容