本教程详细介绍了如何使用 jquery 实现 html 表格单元格的动态高亮功能，以响应用户输入。通过两个不同的场景——“常规固定”和“选项固定”，演示了如何在表格的第一列中高亮指定数量的单元格，并在第二列中根据计算出的值高亮最接近的下一个最大值。文章涵盖了 html 结构、css 样式定义以及核心的 javascript/jquery 逻辑，旨在提供一个结构清晰、易于理解的专业教程。
在现代 Web 应用中，用户界面的交互性和反馈是提升用户体验的关键。当用户在输入框中输入数据时，能够实时地在相关联的表格中高亮显示匹配项及其上下文，可以极大地帮助用户理解数据关系和操作结果。本教程将引导您使用 jQuery 实现一个功能，该功能根据用户在输入框中输入的基本薪资，在两个不同的薪资固定方案（“常规固定”和“选项固定”）中动态高亮显示对应的薪资等级和晋升薪资。
在开始之前，请确保您的项目中已引入 jQuery 库。您可以从 CDN 引入，例如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
我们的应用界面包含一个输入表单和两个并排显示的薪资表，分别用于“常规固定”和“选项固定”的展示。关键元素包括：
为了避免 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>我们定义了三个 CSS 类来控制高亮效果：
.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;
}所有的交互逻辑都将封装在一个 $(document).ready() 函数中，以确保 DOM 完全加载后再执行脚本。
我们使用 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中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
471
收藏
