admin 管理员组

文章数量: 887007

layui数据表格实现点击数据行变色效果，从而保存浏览历史

之前boss让我做出点击表格数据行后，数据行变色的效果。从而保留浏览历史。并且指针放在数据行时，鼠标指针要变成手指状。layui文档中没有提供这个方法，只能自己想办法改一改它的css来实现这种效果，从网上综合各种技巧后，我最终做出了这个效果：

在点击第四行和第六行，会弹出相关的页面。并且第四行和第六行的背景色会变成灰色，从而提示用户这两行已经看过了。

鼠标指针放在数据行上，指针变成手指点击状。从而提醒用户这里是可以点击的！

一、layui表格框架实现

layui表格的初始化构建，和一些基本功能的实现可以看我另一篇文章

二、点击数据行跳转新页面的功能实现

点击表格的row可以跳转到相关的页面，可以通过layui数据表格提供的基础方法来实现。

table.on('row(test)',function(obj){var data = obj.data;window.open("/clewData/clewData.html/"+data.live_time+"/"+data.time+"/"+data.lid+"/"+data.clew_num+"?aid=${aid}");}

用window.open()函数的原因是让新页面出现在新建的窗口中，如果覆盖现有的窗口，记录浏览历史的功能肯定就用不上。

三、点击数据行后数据行背景色变灰

先展示代码

 layui.use(['table','upload'], function

本文标签： layui数据表格实现点击数据行变色效果，从而保存浏览历史

版权声明：本文标题：layui数据表格实现点击数据行变色效果，从而保存浏览历史 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351071h1533071.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。