原创投稿
  1. 创想鸟首页
  2. 用户投稿

jQuery 实现 HTML 表格单元格的动态高亮与数据联动教程

程序猿 • • 用户投稿

jQuery 实现 HTML 表格单元格的动态高亮与数据联动教程 DNI Select 01st January 01st July Current Level Select Level 7 (GP 4600/-) Level 10 (GP 5400/-) Level 11 (GP 6600/-) Level 12 (GP 7600/-) Level 13 (GP 8700/-) Promotion in Level Select Level 10 (GP 5400/-) Level 11 (GP 6600/-) Level 12 (GP 7600/-) Level 13 (GP 8700/-) Level 13A (GP 8900/-) Current Basic After one increment
(in Current Pay Level) After TWO increments
(in Current Pay Level)

Normal Fixation Option Fixation

Current Pay Level Promotion Pay Level Pay from

Current Pay Level Promotion Pay Level Pay from

3. CSS 样式定义

我们定义了三个 CSS 类来控制高亮效果：

.highlight: 用于高亮搜索值本身（红色文本，黄色背景）。.highlight2: 用于高亮搜索值之后的关联值（白色文本，绿色背景）。.highlight3: 用于高亮晋升等级中的匹配值（绿色文本，黄色背景）。

.highlight {    color: red;    background-color: yellow;    font-weight: bold;}.highlight2 {    color: white;    background-color: green;    font-weight: bold;}.highlight3 {    color: green;    background-color: yellow;    font-weight: bold;}/* 隐藏初始的输出字段，当有值时再显示 */#nb, #dupnb {    display: none;}

4. JavaScript/jQuery 核心逻辑

所有的交互逻辑都将封装在一个 $(document).ready() 函数中，以确保 DOM 完全加载后再执行脚本。

4.1 薪资数据定义

我们使用 JavaScript 对象 cplData 和 pplData 来存储不同薪资等级的薪资数组。这些数据是动态生成表格的基础。

var cplData = {    'le7a': [44900,46200,47600,49000,50500,52000,53600,55200,56900,58600,60400,62200,64100,66000,68000,70000,72100,74300, 76500,78800,81200,83600,86100,88700,91400,94100,96900,99800],    'le10a': [56100,57800,59500,61300,63100,65000,67000,69000,71100,732

以上就是jQuery 实现 HTML 表格单元格的动态高亮与数据联动教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596068.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
解决Flexbox布局中长文本溢出导致元素偏移的问题
上一篇 2025年12月23日 10:51:58
Python HTML解析：基于特定子标签内容定位并提取关联父级信息
下一篇 2025年12月23日 10:52:03

相关推荐

发表回复

登录后才能评论
关注微信