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

本教程详细介绍了如何使用 jquery 实现 html 表格单元格的动态高亮功能，以响应用户输入。通过两个不同的场景——“常规固定”和“选项固定”，演示了如何在表格的第一列中高亮指定数量的单元格，并在第二列中根据计算出的值高亮最接近的下一个最大值。文章涵盖了 html 结构、css 样式定义以及核心的 javascript/jquery 逻辑，旨在提供一个结构清晰、易于理解的专业教程。

引言

在现代 Web 应用中，用户界面的交互性和反馈是提升用户体验的关键。当用户在输入框中输入数据时，能够实时地在相关联的表格中高亮显示匹配项及其上下文，可以极大地帮助用户理解数据关系和操作结果。本教程将引导您使用 jQuery 实现一个功能，该功能根据用户在输入框中输入的基本薪资，在两个不同的薪资固定方案（“常规固定”和“选项固定”）中动态高亮显示对应的薪资等级和晋升薪资。

1. 准备工作

在开始之前，请确保您的项目中已引入 jQuery 库。您可以从 CDN 引入，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

2. HTML 结构

我们的应用界面包含一个输入表单和两个并排显示的薪资表，分别用于“常规固定”和“选项固定”的展示。关键元素包括：

• 输入表单: 包含日期、DNI、当前等级、晋升等级和当前基本薪资 (#cb) 等输入字段。
• 薪资数据展示区: 由两个 元素 (#CPLholder 和 #PPLholder 用于常规固定，#CPLholder2 和 #PPLholder2 用于选项固定) 组成，它们将动态填充薪资等级表格。
• 结果显示字段: 用于显示计算后的薪资 (#nb 和 #dupnb)。

为了避免 ID 重复导致的 JavaScript 逻辑冲突，我们为“选项固定”部分的相关元素使用了不同的 ID（例如 dup_pf 代替 pf，dupnb 代替 nb）。

立即学习“前端免费学习笔记（深入）”；


钉钉 AI 助理
钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。
204
查看详情

    
    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    
    







 
OPTION PAY FIXATION 
(A REFERENCE TOOL)
    

        

        

            

                

                    

                        
Date of Promotion
                        

                    
                    

                        
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 表格单元格的动态高亮与数据联动教程的详细内容，更多请关注php中文网其它相关文章！