为了账号安全,请及时绑定邮箱和手机立即绑定

完成了,有几个问题

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

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

  <script type="text/javascript"> 

  

  var number = 3;

  var xh = "xh00";

      window.onload = function(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

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

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

             trs[i].setAttribute("onmouseover","updatebg(id)");

             trs[i].setAttribute("onmouseout","updatebg2(id)");

         }

     

 

}

     

      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

     function add(){

         var name = prompt("请输入姓名","姓名");

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

         var id = "tr" + number;

         tr.setAttribute("id",id);

         tr.setAttribute("onmouseover","updatebg(id)");

         tr.setAttribute("onmouseout","updatebg2(id)");

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

         xhtd.innerHTML = xh + number;

         number++;

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

         nametd.innerHTML = name;

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

         var dela = document.createElement("a");

         dela.innerHTML = "删除";

         dela.setAttribute("href","javascript:;");

         dela.setAttribute("onclick","deleteById(this);");

         deltd.appendChild(dela);

         tr.appendChild(xhtd);

         tr.appendChild(nametd);

         tr.appendChild(deltd);

         document.getElementsByTagName("table")[0].appendChild(tr);

     }

   

     

     // 创建删除函数

     function deleteById(obj){

         var node = obj.parentNode.parentNode;

         node.parentNode.removeChild(node);

     }



function updatebg(id){

    document.getElementById(id).style.background = "#f2f2f2";

}


function updatebg2(id){

    document.getElementById(id).style.background = "#fff";

}



  </script> 

 </head> 

 <body> 

   <table border="1" width="50%" id="table">

   <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

   </tr>  


   <tr id="tr1">

<td>xh001</td>

<td>王小明</td>

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

   </tr>


   <tr id="tr2">

<td>xh002</td>

<td>刘小芳</td>

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

   </tr>  


   </table>

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

 </body>

</html>









更改背景颜色通过CSS是不是更简单快捷一点?应该没什么差别的把。然后就是删除函数了,这个题目是不是超纲了,以前都没讲过this这个关键字,然后有没有只用到前边讲过的知识点实现的。

正在回答

0 回答

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468195    人
  • 解答问题       21891    个

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

进入课程

完成了,有几个问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信