web前端之js实现表格增删和鼠标事件

zhangFreedom

于 2019-09-20 16:48:32 发布

阅读量503

点赞数

文章标签： js web前端

本文链接：https://blog.youkuaiyun.com/weixin_43286092/article/details/101066348

版权

本文主要探讨了如何使用JavaScript在web前端实现表格的动态添加和删除行功能，并详细讲解了如何添加鼠标事件，包括点击、 hover 和选中效果。通过实例代码，帮助读者理解JavaScript在交互式表格操作中的应用。

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

<!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="#CCC"

最低0.47元/天解锁文章