当前位置： 首页 > news >正文

Layui实现自定义的table列悬停事件并气泡提示信息

news 2026/5/19 3:16:38

1、概要

使用layui组件实现table的指定列悬停时提示信息，因为layui组件中没有鼠标悬停事件支持，所以需要结合js原生事件来实现这个功能，并结合layui的tips和列的templte属性气泡提示实现效果。

2、效果图

 3、代码案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Layui Table Tooltip</title><!-- 引入 Layui 的 CSS 文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css" rel="stylesheet">
</head>
<body><!-- Layui 表格容器 -->
<table id="demo" lay-filter="test"></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 id="'+d.id+'"  onmouseover="show('+d.id+')" onmouseout="closeTip()">' + 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 class="layui-elem-field" style="color:black">' +'<legend style="font-size:14px;">系统规则数量统计</legend>' +'<div class="layui-field-box">'+d+'</div></fieldset>';return html;}});</script></body>
</html>

相关文章：

Layui实现自定义的table列悬停事件并气泡提示信息

1、概要 使用layui组件实现table的指定列悬停时提示信息&#xff0c;因为layui组件中没有鼠标悬停事件支持&#xff0c;所以需要结合js原生事件来实现这个功能&#xff0c;并结合layui的tips和列的templte属性气泡提示实现效果。 2、效果图 3、代码案例 <!DOCTYPE html&g…...

编程日记 2023/12/19 1:26:25

Tomcat从认识安装到详细使用

文章目录 一.什么是Tomact?二.Tomcat的安装1.下载安装包2.一键下载3.打开Tomcat进行测试4.解决Tomcat中文服务器乱码 三.Tomcat基本使用1.启动与关闭Tomcat2.Tomcat部署项目与浏览器访问项目 四.Tomcat操作中的常见问题1.启动Tomcat后&#xff0c;启动窗口一闪而过&#xff1f…...

编程日记 2023/12/19 1:25:24

07-Eventing及实践

1 Knative Eventing的相关组件 Knative Eventing具有四个最基本的组件&#xff1a;Sources、Brokers、Triggers 和 Sinks 事件会从Source发送至SinkSink是能够接收传入的事件可寻址&#xff08;Addressable&#xff09;或可调用&#xff08;Callable&#xff09;资源 Knative S…...

编程日记 2023/12/19 1:20:19

Linux下Netty实现高性能UDP服务

前言 近期笔者基于Netty接收UDP报文进行业务数据统计的功能&#xff0c;因为Netty默认情况下处理UDP收包只能由一个线程负责&#xff0c;无法像TCP协议那种基于主从reactor模型实现多线程监听端口&#xff0c;所以笔者查阅网上资料查看是否有什么方式可以接收UDP收包的性能瓶颈…...

编程日记 2023/12/19 1:19:18

Ubuntu 22.04 Tesla V100s显卡驱动，CUDA，cuDNN，MiniCONDA3 环境的安装

今天来将由《蓝创精英团队》带来一个Ubuntu 显卡环境的安装&#xff0c;主要是想记录下来&#xff0c;方便以后快捷使用。 主要的基础环境 显卡驱动 (nvidia-smi)CUDA (nvidia-smi 可查看具体版本)cuDNN (cuda 深度学习加速库)Conda python环境管理(Miniconda3) Nvidia 驱动…...

编程日记 2023/12/19 1:17:17

FFmpeg转码流程和常见概念

视频格式&#xff1a;mkv&#xff0c;flv&#xff0c;mov&#xff0c;wmv&#xff0c;avi&#xff0c;mp4&#xff0c;m3u8&#xff0c;ts等等 FFmpeg的转码工具&#xff0c;它的处理流程是这样的&#xff1a; 从输入源获得原始的音视频数据&#xff0c;解封装得到压缩封装的音…...

编程日记 2023/12/19 1:16:16

【01】GeoScene生产海图或者电子航道图

1.1 什么是电子海图制图模块 GeoScene海事模块是一个用于管理和制作符合国际水文组织&#xff08;IHO&#xff09;S-100系列标准和S-57标准的海事数据的系统。提供了S-100和S-57工具&#xff0c;用于加载基于S-100的要素目录、创建基于S-57传输结构的数据、输入数据、符号化数…...

编程日记 2023/12/19 1:14:14

TWS蓝牙耳机的船运模式

TWS蓝牙耳机的船运模式 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群赠送语音信号处理降噪算法，蓝牙耳机音频，DSP音频项目核心开发资料, TWS蓝牙耳机的船运模式是指在将耳机从一个地方运送到另一个地方时，…...

编程日记 2023/12/19 1:10:10

Vue系列之指令 v-html

文章の目录 1、v-html指令2、基本用法写在最后 1、v-html指令 v-html 指令类似于 v-text 指令&#xff0c;它与 v-text 区别在于 v-text 输出的是纯文本&#xff0c;浏览器不会对其再进行html解析&#xff0c;但v-html会将其当html标签解析后输出&#xff0c;类似于 JavaScrip…...

编程日记 2023/12/19 1:08:09

Mac如何安装stable diffusion

今天跟大家一起在Mac电脑上安装下stable diffusion&#xff0c;在midjourney等模型收费的情况下如何用自己的电脑算力用上免费的画图大模型呢&#xff1f;来吧一起实操起来 一、安装homebrew 官网地址&#xff1a;Homebrew — The Missing Package Manager for macOS (or Lin…...

编程日记 2023/12/19 1:05:06

Kubernetes (k8s) 快速认知

应用部署方式 传统部署时代 早期的时候&#xff0c;各个组织是在物理服务器上运行应用程序。缺点 资源分配问题&#xff1a; 无法限制在物理服务器中运行的应用程序资源使用 维护成本问题&#xff1a; 部署多个物理机&#xff0c;维护许多物理服务器的成本很高 虚拟化部署时…...

编程日记 2023/12/19 1:04:05

Electron V28主进程与渲染进程互相通信总结

本文示例采用ElectronVue3TS编写&#xff0c;请读者理顺思路&#xff0c;自行带入自己的项目。 注&#xff1a; 读本文前请先搞懂什么是主进程&#xff0c;什么是渲染进程。 在Electron中有着ipcMain和ipcRenderer、contextBridge模块&#xff0c;以及创建窗口对象上的webCont…...

编程日记 2023/12/19 1:03:04

MySQL主从复制详解

目录 1. 主从复制的工作原理 1.1. 主从复制的角色 1.2. 主从复制的流程 2. 配置MySQL主从复制 2.1. 确保主服务器开启二进制日志 2.2. 设置从服务器 2.3. 连接主从服务器 2.4. 启动复制 3. 主从复制的优化与注意事项 3.1. 优化复制性能 3.2. 注意复制延迟 3.3. 处理…...

编程日记 2023/12/19 0:57:58

verilog基础语法-计数器

概述&#xff1a; 计数器是FPGA开发中最常用的电路&#xff0c;列如通讯中记录时钟个数&#xff0c;跑马灯中时间记录&#xff0c;存储器中地址的控制等等。本节给出向上计数器&#xff0c;上下计数器以及双向计数器案例。 内容 1. 向上计数器 2.向下计数器 3.向上向下计数…...

编程日记 2023/12/19 0:50:52

有SCL,SDA,TRIG，I2C的元器件是什么？在哪找？proteus

寻找方法&#xff1a;...

编程日记 2023/12/19 0:48:51

再谈低代码开发——值得所有程序设计和开发者重视的建议！

前几天看到关于“低代码开发”的话题&#xff0c;简单的谈了些自己的看法&#xff0c;也看了一些朋友们各抒己见的好文章&#xff0c;今天想结合我们实际使用的开发平台和大家再做些探讨。 在平台的简介中首先提出了这个大家一定很关心的问题&#xff1a; 一、“为什么使用低代…...

编程日记 2023/12/19 0:47:49

Docker部署MinIO对象存储服务器结合内网穿透实现远程访问

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器&#xff0c;可以在各种环境中运行&#xff0c;例如本地、Docker容器、Kubernetes集群等。它兼…...

编程日记 2023/12/19 0:46:48

USB2.0 Spec

USB System Description A USB system is described by three definitional areas: • USB interconnect • USB devices • USB host USB interconnect The USB interconnect is the manner in which USB devices are connected to and communicate with the host. USB Ho…...

编程日记 2023/12/19 0:40:44

prbs测试

PRBS是 Pseudo Random Binary Sequence 的简称，是一种伪随机序列，用于产生随机数据。 PRBS检测主要应用在设备开局或维护期间，在没有合适误码仪的情况下，使能了PRBS检测功能的设备自行发送PRBS码流，PRBS码流通过被测试网络，经远端设备环回(远端设备需要配置环回)，经过PR…...

编程日记 2023/12/19 0:39:43

计算机网络：数据链路层（VLAN）

今天又学到一个知识&#xff0c;加油&#xff01; 目录 一、传统局域网的局限&#xff08;促进VLAN的诞生&#xff09; 二、VLAN简介 三、VLAN的实现 总结 一、传统局域网的局限&#xff08;促进VLAN的诞生&#xff09; 缺乏流量隔离:即使把组流量局域化道一个单一交换机中…...

编程日记 2023/12/19 0:36:40

从莎士比亚到鲁迅，NotebookLM辅助文学研究全流程，深度拆解7类文本生成陷阱与规避方案

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;NotebookLM在文学研究中的范式革命 传统文学研究长期依赖人工细读、索引比对与跨文本联想&#xff0c;耗时且易受主观经验局限。NotebookLM 以“源文档优先”&#xff08;source-first&#xff09;架构重构人…...

编程新知 2026/5/19 2:34:56

K-Means聚类选K避坑指南：当肘部法则“失灵”，轮廓系数如何救场？

K-Means聚类选K避坑指南&#xff1a;当肘部法则"失灵"&#xff0c;轮廓系数如何救场&#xff1f; 在数据科学实践中&#xff0c;K-Means算法因其简洁高效而广受欢迎&#xff0c;但确定最佳聚类数K却常让从业者陷入困境。当面对高维、噪声多或分布不平衡的真实业务数据…...

编程新知 2026/5/19 2:23:12

AI智能体的开发与测试

AI智能体&#xff08;AI Agent&#xff09;的开发与测试是一项将大语言模型&#xff08;LLM&#xff09;能力转化为企业级稳定应用的系统工程。它不仅需要先进的算法&#xff0c;更依赖于严密的工程架构与创新的测试方法。以下是AI智能体开发与测试的全景指南&#xff1a;第一部…...

编程新知 2026/5/19 1:51:58

MATLAB Robotics Toolbox：从基础旋转变换到机器人运动学建模

1. 初识MATLAB Robotics Toolbox 第一次接触MATLAB Robotics Toolbox时&#xff0c;我完全被它强大的功能震撼到了。这个工具箱就像是为机器人工程师量身定制的瑞士军刀&#xff0c;从最基本的旋转变换到复杂的运动学建模&#xff0c;应有尽有。记得当时我正在做一个机械臂控制…...

编程新知 2026/5/19 1:47:54

DIY USB-C扩展坞：从引脚连接到3D打印，打造开发板专属工作站

1. 项目概述与核心价值如果你和我一样&#xff0c;桌上常年堆着各种开发板&#xff0c;从Arduino Uno到最新的ESP32-S3&#xff0c;每次想插拔USB线调试或者充电&#xff0c;都得在一堆线缆里翻找&#xff0c;板子还容易滑来滑去&#xff0c;那这个项目就是为你准备的。今天我们…...

编程新知 2026/5/19 1:23:37

虚幻引擎网络协议逆向分析：从抓包到安全加固的工程实践

1. 项目概述与核心价值最近在游戏开发圈里&#xff0c;特别是那些深耕UE&#xff08;Unreal Engine&#xff0c;虚幻引擎&#xff09;网络同步和反外挂的同行们&#xff0c;可能都听说过或者正在研究一个叫venetianglassmaking858/UnrealClientProtocol的项目。这个名字听起来有…...

编程新知 2026/5/19 1:21:33

python系列【仅供参考】：避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录

避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录 避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录----------避开这些坑！用Python爬取IEEE Xplore论文信息时，我的防反爬与数据清洗实战记录 1. 反爬机制：不只是…...

编程新知 2026/5/19 1:19:32

终极免费开源项目管理指南：如何用GanttProject高效规划复杂项目？

终极免费开源项目管理指南&#xff1a;如何用GanttProject高效规划复杂项目&#xff1f; 【免费下载链接】ganttproject Official GanttProject repository. 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 想要免费、开源且功能强大的项目管理工具吗&#…...

编程新知 2026/5/19 0:52:25

AI智能体技能开发实战：从awesome-agent-skills到高效智能体构建

1. 项目概述&#xff1a;从技能清单到智能体构建的实战指南最近在折腾AI智能体&#xff08;Agent&#xff09;开发的朋友&#xff0c;估计都绕不开一个名字&#xff1a;awesome-agent-skills。这个由VoltAgent维护的开源项目&#xff0c;乍一看就是个GitHub上常见的“Awesome”…...

编程新知 2026/5/18 23:43:43

基于SpringBoot的共享汽车管理系统毕设源码

博主介绍&#xff1a;✌ 专注于Java,python,✌关注✌私信我✌具体的问题&#xff0c;我会尽力帮助你。一、研究目的本研究旨在构建一个基于Spring Boot与Vue框架的共享汽车管理系统以解决当前共享汽车行业在资源调度效率、用户服务体验以及数据安全等方面存在的核心问题。随着城…...

编程新知 2026/5/18 23:35:30