参考大佬的代码,然而功能函数都用不了,求教!

来源:9-22 编程练习

慕九州0522290

2020-01-27 15:07

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  <script type="text/javascript">
 
      window.onload = function(){
                 
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         var tr=document.getElementsByTagName("tr");
   for(var i=0;i<tr.length;i++){
   bgcChange(tr[i]);
   }
  
 
  }
  function bgcChange(node){
  node.onmouseover=functon(){
   node.style.backgroundColor="#f2f2f2"
  }
  node.onmouseout=function(){
   node.style.backgroundColor="#fff";
  }
  }
    
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     var num=2;
  function add(){
  num++;
  var tr=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:;' onclick='delete(this)' >删除</a>";
  var tab=document.getElementById("table");
  tab.appendChild(tr);
  tr.appendChild(xh);
  tr.appendChild(xm);
  tr.appendChild(del);
   var tr = document.getElementsByTagName("tr");
          for(var i=0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
  }
      
    
     // 创建删除函数
     function delete(node){
  var tr=node.parentNode.parentNode;
  tr.parentNode.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:;" onclick="delete(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

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

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


写回答 关注

1回答

  • Coooooolfznk
    2020-03-23 11:44:33

    http://img.mukewang.com/5e78308b0001fb7d02870027.jpg没有分号

JavaScript进阶篇

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

468196 学习 · 21891 问题

查看课程

相似问题