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

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

news 2026/2/11 0:37:02

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/10 11:45:58

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/10 7:11:42

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/31 6:18:08

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03