jquery实现点击表格后,使当前行变色的特效【非常详细】亲测 原创

文章标签: jquery table
  • :
  • 07-07 16:47
  • :
  • 109次
  • :
  • 0条
  • 3赞

简介用jquery实现当点击网页内的table表格时,被点击的当前行变色的特效代码及完整的在线实例演示。l

在网页开发中,我们经常会用到这样的一个特效:当点击网页中的表格时,被点击的当前行会变色突出显示。


其实我们要实现这个功能,用jquery是非常简单的,只用一句代码就能实现:

$("table#aijquery").on("click",function(e){	
    $(e.target).parent("tr").addClass("bg-primary");
});


上面这句代码解释起来就是:当ID为aijquery的表格被点击时,获取当前被点击的元素的tr父标签,然后为它添加一个"bg-primary"的CSS样式。


但是这句代码存在一个问题,那就是再次点击其它的地方时,上次变色的行不会变回来,所以我们可以再加上一句:

$("table#aijquery").on("click",function(e){	
    $(e.target).parent("tr").addClass("bg-primary");
    $(e.target).parent("tr").siblings("tr.bg-primary").removeClass("bg-primary");
});


第二句代码解释起来就是:获取当前被点击元素的tr父标签的含有样式"bg-primary"的同辈tr标签元素,然后清除样式"bg-primary".


其实我们是可以再接着进一步优化的,我们知道,jquery是支持“链式”代码的,所以我们可以这样来写:

$("table#aijquery").on("click",function(e){	
    $(e.target).parent("tr").addClass("bg-primary").siblings("tr.bg-primary").removeClass("bg-primary");
});


上面的实例代码是站长亲测过的,下面是在线实例演示地址:

jquery实现点击表格后,当前行变色的在线实例演示

虽然这只是一个非常简单的特效功能,但站长还是用了点时间,把这篇文章写了出来,目的就是为了让所有看到这篇文章的朋友,通过本文这个简单的实例,进一步的学习和掌握jquery方法和技巧,可以学会自己动手写自己所需要的jquery代码!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 10:35:57