Html table 页实现点击选中tr行改变背景颜色

Html table 页实现点击选中tr行改变背景颜色
table 表格展示数据时没有选中的效果，如果对展示数据做了一些操作会导致不太容易分辨，所以选中效果就很重要，而这个事件需要作用于整个tr的所有td 而不是某个td。
具体请看代码，如果可以更加方便请指出，。
首先我们要把click确定在哪个tr上，关键获取tr是最重要的，可以根据不通的选择器实现我使用的是id选择器加上标签。
我的做法是获取到所有的tr 给点击的tr添加Class ，通过Class 设置背景颜色。
//js 代码

$("#tbody tr").click(function(){ //给每个tr 绑定点击事件  主要锁定每个trvar trs = $(this).parent().find('tr'); //获取所有tr if(trs.hasClass('on')){ //判断这些tr 有没有Class ‘on'’trs.removeClass('on');//把class on 移除 }             $(this).addClass('on');//点击的tr 添加 on class 用于改变样式
});

**//通过Class on 设置css样式
//给tr标签里有onClass 的所有td 设置背景颜色。

tr.on td{background-color: #BFEFFF;  /*  背景颜色*/
}

**
这样 tr行选中改变背景颜色就完成了。也不用遍历。个人认为此种写法，主要在于对选中tr的定位。

如有漏洞欢迎指正。。。

Html table 页实现点击选中tr行改变背景颜色相关推荐

vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
html5单击修改背景色,js实现点击ul/li等改变背景颜色
今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. Change.html body li{ list-style-type: none; } 文字文字文字 function g(x) { ...
Jquery中设置表格的悬浮和选中时行的背景颜色
场景效果要求鼠标放在一行上此行背景颜色单倍高亮,点击一行时双倍高亮. 实现 html代码 <div class="ibox-content" id="orde ...
ElementUI表格选中多行改背景颜色
设置:row-class-name="tableRowClassName" <div class="table"> <el-tableref ...
选中表格行高亮html,table选中的行以指定颜色高亮显示
table选中的行以指定颜色高亮显示 1 三星 AA 2 Norkia BB 3 苹果 CC 4 联想 DD
点击按钮随机更换页面背景颜色
点击按钮随机更换页面背景颜色先准备一个按钮就像如图所示的那样然后获取到刚刚的按钮并为按钮绑定点击事件. 并且弹出警告框来证明获取并绑定成功按钮. 效果展示: 点击按钮即可弹出警告框. 在点击事件 ...
Antd Table 点击行变换背景颜色 (Antd React)
需求实现的目标是,点击这一行,然后出现一个modal,这个modal可以拖拽,并且可以知道是点击哪一行出现的事件. 那么需要做的就是,点击这一行,然后其背景颜色变化. 实现 Antd Table有 ...
android中设置ListView的选中的Item的背景颜色(附源码)
http://longyi-java.iteye.com/blog/976067 ListView中没有默认的选择颜色,只有选择Item后的焦点颜色,鼠标点击时Item有颜色,放开鼠标后颜色也就没有了 ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...

Html table 页实现点击选中tr行改变背景颜色

Html table 页实现点击选中tr行改变背景颜色相关推荐

最新文章

热门文章

Html table 页 实现点击选中tr行 改变背景颜色

Html table 页 实现点击选中tr行 改变背景颜色相关推荐

最新文章

热门文章

Html table 页实现点击选中tr行改变背景颜色

Html table 页实现点击选中tr行改变背景颜色相关推荐