网页动态交互与数据增删功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/greenHandCh/article/details/50526481

本文详细介绍了如何通过JavaScript实现网页中表格行的动态背景颜色变化、添加和删除功能，包括事件绑定、DOM操作等核心知识点，旨在帮助开发者深入理解网页动态交互与数据增删的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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(a)  
        {  
          a.οnmοuseοver=function(){  
            a.style.backgroundColor="#f2f2f2";  
        }  
          a.οnmοuseοut=function(){  
            a.style.backgroundColor="#fff";  
        }  
 }  
  
  
  
  
         function rem(rec)  
     {  
         var x = rec.parentNode.parentNode;  
         var y = document.getElementById("table").lastChild;  
         //document.write(y.lastChild.nodename);  
         y.removeChild(x);  
     }  
       
       
      var num = document.getElementsByTagName("tr").length;  
      document.write(num);  
      function add(){  
      var input = document.getElementsByTagName("input")[0];   
      var tab = document.getElementById("table").lastChild;  
      var tr = document.createElement("tr");  
      var td1 = document.createElement("td");  
      var td2 = document.createElement("td");  
      var td3 = document.createElement("td");  
            num++;  
            td1.innerHTML = "xh00"+ num;  
            td2.innerHTML = "第"+num+"个同学";  
            td3.innerHTML = '<a href="javascript:function();" onclick = "rem(this)">删除</a>' ;  
            tr.appendChild(td1);  
            tr.appendChild(td2);  
            tr.appendChild(td3);   
            tab.appendChild(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 = "rem(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->  
       </tr>  
  
       <tr>  
        <td>xh002</td>  
        <td>刘小芳</td>  
        <td><a href="javascript:;" onclick = "rem(this)">删除</a></td>   <!--在删除按钮上添加点击事件  --> 
       </tr>    
  
       </table>  
       <input type="button" value="添加一行" οnclick="add()"/>   <!--在添加按钮上添加点击事件  -->  
 </body>  
</html>

今天搞这个东西搞了一整个晚上！！！！！！！！！！！！！！！学的东西明天整理，晚安！