菜单

4166am金沙下载jquery实现带单选按钮的表格行选中时高亮显示,jquery实现带复选框的表格行选中删除时高亮显示

2019年8月2日 - 前端排行

通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除。在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示。这样给人的感觉非常好。

上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的。如今的时代,就是用户体验的时代。

效果如下:
4166am金沙下载 1 
我做的这里有两个功能:
功能1、单击某行,该行的复选框被选中,同时改变一下背景色。
功能2、单击全选/全不选标签后,改变行的颜色。
两个功能我封装到了js文件中,使用的时候引入就行了。
先看一下CSS的代码,我封装到了一个css文件中

效果如下:
CSS文件如下如下所示:

复制代码 代码如下:

复制代码 代码如下:

.selected{
background:#FF6500;
color:#fff;
}

.selected{
background:#FF6500;
color:#fff;
}:

在看js文件的代码:
功能1的代码:

这次的js文件的代码就变得更简单了,如下所示:

复制代码 代码如下:

复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图