问答详情
源自：9-22 编程练习

大神给个靠谱代码~~~

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

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

  <script type="text/javascript"> 

  table=document.getElementById("table");

      window.onload = function(){

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

 


          }

     }

  }  

     

 

}

     

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

     

   

     

     // 创建删除函数

     



  </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="">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


  </table>

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

 </body>

</html>


提问者：新手村上路 2018-12-18 17:21

个回答

  • 阳火锅
    2018-12-18 17:36:47
    已采纳

    <!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 tr=document.getElementsByTagName("tr");
              for(var i= 0;i<tr.length;i++)
              {
                  bgcChange(tr[i]);
              }
         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
          }         
         function bgcChange(obj)
         {
            obj.onmouseover=function(){
                obj.style.backgroundColor="yellow";
            }
            obj.onmouseout=function(){
                obj.style.backgroundColor="red";
            }
         }
       
         // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
         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='del(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 del(obj)
         {
             var tr=obj.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="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
           </tr>

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

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

    2
  • 慕后端7869356
    2019-01-07 04:30:38

    写的很好啊，但是有个bug，删除操作需要进行num--操作

    0