本教程详细介绍了如何使用 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）。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <title>Option Payfixation Reference Tool</title> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Normal Payfixation Calculation Tool (for Level 7 and 10 to 13)"> <style> .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; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- 引入 Bootstrap CSS，如果需要的话 --> <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> --> </head> <body> <br><br><br> <div class="container"> <center><h2>OPTION PAY FIXATION <br>(A REFERENCE TOOL)</h2></center> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="table-responsive-md"> <table class="table" border="0"> <tr> <td width="250px">Date of Promotion</td> <td width="250px"><input class="form-control" type="date" name="dop" id="dop" autocomplete="off" /></td> </tr> <tr> <td>DNI</td> <td> <select class="form-control" name="dni" id="dni" autocomplete="off"> <option value="0">Select</option> <option value="1">01st January</option> <option value="2">01st July</option> </select> </td> </tr> <tr> <td>Current Level</td> <td> <select class="form-control" name="cl" id="cl" autocomplete="off"> <option value="0" data-id="">Select</option> <option value="1" data-id="le7a">Level 7 (GP 4600/-)</option> <option value="2" data-id="le10a">Level 10 (GP 5400/-)</option> <option value="3" data-id="le11a">Level 11 (GP 6600/-)</option> <option value="4" data-id="le12a">Level 12 (GP 7600/-)</option> <option value="5" data-id="le13a">Level 13 (GP 8700/-)</option> </select> </td> </tr> <tr> <td>Promotion in Level</td> <td> <select class="form-control" name="pl" id="pl" autocomplete="off"> <option value="0" data-id="">Select</option> <option value="1" data-id="le10b">Level 10 (GP 5400/-)</option> <option value="2" data-id="le11b">Level 11 (GP 6600/-)</option> <option value="3" data-id="le12b">Level 12 (GP 7600/-)</option> <option value="4" data-id="le13b">Level 13 (GP 8700/-)</option> <option value="5" data-id="le13ab">Level 13A (GP 8900/-)</option> </select> </td> </tr> <tr> <td>Current Basic</td> <td> <input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/> <!-- 用于同步选项固定部分的输入值 --> <input class="form-control" type="text" name="dupcb" id="dupcb" autocomplete="off"/> </td> </tr> <tr> <td>After one increment<br>(in Current Pay Level)</td> <td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off" readonly/></td> </tr> <tr> <td>After TWO increments<br>(in Current Pay Level)</td> <td> <input class="form-control" type="text" name="dupaftinc" id="dupaftinc" autocomplete="off" readonly/> </td> </tr> </table> </div> </div> <div class="row"> <div class="col-md-10"> <table class="table table-responsive table-bordered"> <tr> <td colspan="2" style="font-weight:bold; text-align:center;">Normal Fixation</td> <td colspan="1" style="font-weight:bold; text-align:center;"></td> <td colspan="2" style="font-weight:bold; text-align:center;">Option Fixation</td> </tr> <tr> <th>Current Pay Level</th> <th>Promotion Pay Level</th> <th>Pay from <input type="text" id="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/></th> <!--OPTION FIXATION HEADINGS--> <th>Current Pay Level</th> <th>Promotion Pay Level</th> <th>Pay from <input type="text" id="dup_pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/></th> </tr> <tr> <td id="CPLholder"> </td> <td id="PPLholder"> </td> <td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off" readonly/></td> <!--OPTION FIXATION CONTENT--> <td id="CPLholder2"> </td> <td id="PPLholder2"> </td> <td><input class="form-control" type="text" name="dupnb" id="dupnb" autocomplete="off" readonly/></td> </tr> </table> </div> </div> <div class="col-md-3"></div> </div> </div> </body> </html>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
