邯郸做wap网站的公司,河南省建设监理协会官网,中山百度seo排名公司,wordpress 统计浏览量1、概要
使用layui组件实现table的指定列悬停时提示信息#xff0c;因为layui组件中没有鼠标悬停事件支持#xff0c;所以需要结合js原生事件来实现这个功能#xff0c;并结合layui的tips和列的templte属性气泡提示实现效果。
2、效果图 3、代码案例
!DOCTYPE html因为layui组件中没有鼠标悬停事件支持所以需要结合js原生事件来实现这个功能并结合layui的tips和列的templte属性气泡提示实现效果。
2、效果图 3、代码案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleLayui Table Tooltip/title!-- 引入 Layui 的 CSS 文件 --script srchttps://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js/scriptlink hrefhttps://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css relstylesheet
/head
body!-- Layui 表格容器 --
table iddemo lay-filtertest/table
!-- 引入 Layui 的 JavaScript 文件 --
script// 使用 layuilayui.use([table], function(){var layer layui.layer;var table layui.table;var tips;// 定义数据var data [{id: 1, name: John, age: 25},{id: 2, name: Jane, age: 30},// 添加更多数据...];// 渲染表格table.render({elem: #demo,cols: [[{field: id, title: ID},{field: name, title: Name, templet: function(d) {return span idd.id onmouseovershow(d.id) onmouseoutcloseTip() d.name/span;}}, // 添加 event 属性{field: age, title: Age}// 添加更多列...]],data: data});window.show function(d) {tips layer.tips(showTemplate(d), #d, {tips: [3, #F8F8F8],area: [400px,auto]});}window.closeTip function() {layer.close(tips);}window.showTemplate function(d) {let html fieldset classlayui-elem-field stylecolor:black legend stylefont-size:14px;系统规则数量统计/legend div classlayui-field-boxd/div/fieldset;return html;}});/script/body
/html
