使用 jquery 处理 2 组类似的 html 表格单元格中的输入值答案

【问题标题】：highlighting input value in 2 similar sets of html table cells with jquery使用 jquery 处理 2 组类似的 html 表格单元格中的输入值
【发布时间】：2022-09-24 16:59:15
【问题描述】：

有两组 html 表，即 1. Normal Fixation 2. Option Fixation。每个标题都有一对相似的列数据。
我需要遵循两个标准
在第一种情况下，即正常固定，当用户从当前基本（文本框 id 为 cb）中的正常固定表第一列值输入任何值时，前两个单元格值包括要突出显示的搜索值和要突出显示的下一个最大值第二列值。

在第二种情况下，即选项固定，输入要在选项固定表第一列中搜索的值，最多 3 个级别并突出显示，第二列中的第 4 个最大值突出显示。

例如：选择Current level Option为Level 7，Promotion level选项为Level 10。将Current Basic中的输入值设置为46200，然后是46200，在Normal Fixation第一列中突出显示47600，在第二列中突出显示56100 .

同样，在 option fixation 第一列中，要突出显示三个值，即 46200、47600 和 49000。在第二列中突出显示的第四个最大值，即 56100。


    <!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 {display:none;
        }
        
        #dupnb {display:none;
        }
        
        
        </style>
        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js\"></script>
        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.min.css\">
        <link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.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=\"pf\" style=\"width:100px; border:0; font-weight:bold; color:red;\" readonly/></th>
                </tr>
                <tr>
                    <td id=\"CPLholder\">&nbsp;</td>
                    <td id=\"PPLholder\">&nbsp;</td>
                    <td><input class=\"form-control\" type=\"text\" name=\"nb\" id=\"nb\" autocomplete=\"off\" readonly/></td>
                    
                    <!--OPTION FIXATION CONTENT-->
                    <td id=\"CPLholder2\">&nbsp;</td>
                    <td id=\"PPLholder2\">&nbsp;</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>
    
    
    
    <script>
    $(document).ready(function(){
        $(\'#dni\').on(\'click\', function() {
        $(\'#pf\').val($(\'#dop\').val());
            
            if ( this.value == \'1\')
            {
            var revDate = new Date($(\"#dop\").val());
            var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 8));
          var revisedate = (new Date(plusOneYear)).toLocaleDateString(\'en-GB\');
          
          document.querySelector(\"#nid\").value = revisedate;
          
          }
          else if ( this.value == \'2\')
          {
            var revDate = new Date($(\"#dop\").val());
            var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 2));
          var revisedate = (new Date(plusOneYear)).toLocaleDateString(\'en-GB\');
          document.querySelector(\"#nid\").value = revisedate;
          }
        });
    });
    </script>
    
    <script>
    $(document).ready(function() {
        $(\'#cb\').keyup(function(e) {
            var txtVal = $(this).val();
            $(\'#dupcb\').val(txtVal);
        });
    });
    
    </script>
    
    
    
    
        <script type=\"text/javascript\">
            $(function(){
    
            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,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
                \'le11a\' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
                \'le12a\' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
                \'le13a\' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900]
            }
    
            var pplData = {
                \'le10b\' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
                \'le11b\' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
                \'le12b\' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
                \'le13b\' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900],
                \'le13ab\' : [131100,135000,139100,143300,147600,152000,156600,161300,166100,171100,176200,181500]
            }
    
    
            $(\'#cl\').on(\'change\', function() 
            {
                var dataId = $(\'option:selected\', this).data(\'id\');
                $(\'#cb, #aftinc, #nb\').val(\'\');
                $(\'#CPLholder\').find(\'table tr\').removeClass(\'highlight highlight2\');
                $(\'#PPLholder\').find(\'table tr\').removeClass(\'highlight3\');
                if(dataId)
                {
                    $(\'#CPLholder\').html(createTable(dataId,\'cpl\'));
                }
                else
                {
                   $(\'#CPLholder\').html(\'\');
                }
            });
    
    
            $(\'#pl\').on(\'change\', function() 
            {
                var dataId = $(\'option:selected\', this).data(\'id\');
                $(\'#cb, #aftinc, #nb\').val(\'\');
                $(\'#CPLholder\').find(\'table tr\').removeClass(\'highlight highlight2\');
                $(\'#PPLholder\').find(\'table tr\').removeClass(\'highlight3\');
                if(dataId)
                {
                    $(\'#PPLholder\').html(createTable(dataId,\'ppl\'));
                }
                else
                {
                   $(\'#PPLholder\').html(\'\'); 
                   $(\'#PPLholder2\').html(\'\'); 
                }
            });
    
    
            function createTable(dataId,plType)
            {
                var table = $(\'<table id=\"\'+dataId+\'\" class=\"table table-responsive\">\');
                var data = (plType == \'cpl\') ? cplData[dataId] : pplData[dataId];
                $.each(data, function(i, item) 
                {
                    table.append(\'<tr><td>\' + item + \'</td></tr>\');
                });        
                return table;
            }
    <!--for NORMAL FIXATION HIGHLIGHT - starts-->
            $(\'#cb\').on(\'change keyup\', function () 
            {
                var search = $(this).val();
                var activeCPL = $(\'#\'+$(\'#CPLholder\').find(\'table\').attr(\'id\'));
                var pplId = $(\'#PPLholder\').find(\'table\').attr(\'id\');
                var activePPL = $(\'#\'+pplId);
    
                if(activeCPL != undefined) activeCPL.find(\'tr\').removeClass(\'highlight highlight2\');
                $(\'#aftinc\').val(\'\');
                if(activePPL != undefined) activePPL.find(\'tr\').removeClass(\'highlight3\');
    
                var aftinc = 0;
    
                activeCPL.find(\'tr\').find(\'td\').each(function()
                {
                    if($(this).text() == search)
                    {
                        $(this).parent(\'tr\').addClass(\'highlight\');
                        $(this).parent(\'tr\').next().addClass(\'highlight2\');
                        
                        aftinc = $(this).parent(\'tr\').next().text();
                        $(\'#aftinc\').val(aftinc);
                    }
                });
                
                if(aftinc > 0)
                {
                    var closest = pplData[pplId].reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });                
                }
    
                if (closest - aftinc > 0) 
                {
                    activePPL.find(\'tr\').find(\'td\').each(function()
                    {
                        if (this.innerHTML == closest) 
                        {
                            $(this).parent(\'tr\').addClass(\'highlight3\');
                            var nb = $(this).parent(\'tr\').text();
                            var nnb = $(this).parent(\'tr\').next().text();
                            $(\'#nnb\').val(nnb);
                            $(\'#nb\').val(nb);
                        }
                    });
                }
    
            });
            
    <!--for NORMAL FIXATION HIGHLIGHT - Ends-->     
            
        });
        </script>
        
        
        
    
        
    <!----> 
        
        
     <script type=\"text/javascript\">
            $(function(){
    
            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,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
                \'le11a\' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
                \'le12a\' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
                \'le13a\' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900]
            }
    
            var pplData = {
                \'le10b\' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
                \'le11b\' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
                \'le12b\' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
                \'le13b\' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900],
                \'le13ab\' : [131100,135000,139100,143300,147600,152000,156600,161300,166100,171100,176200,181500]
            }
    
    
            $(\'#cl\').on(\'change\', function() 
            {
                var dataId = $(\'option:selected\', this).data(\'id\');
                $(\'#dupcb, #dupaftinc, #dupnb\').val(\'\');
                $(\'#CPLholder2\').find(\'table tr\').removeClass(\'highlight highlight2\');
                $(\'#PPLholder2\').find(\'table tr\').removeClass(\'highlight3\');
                if(dataId)
                {
                    $(\'#CPLholder2\').html(createTable(dataId,\'cpl\'));
                }
                else
                {
                   $(\'#CPLholder2\').html(\'\');
                }
            });
    
    
            $(\'#pl\').on(\'change\', function() 
            {
                var dataId = $(\'option:selected\', this).data(\'id\');
                $(\'#dupcb, #dupaftinc, #dupnb\').val(\'\');
                $(\'#CPLholder2\').find(\'table tr\').removeClass(\'highlight highlight2\');
                $(\'#PPLholder2\').find(\'table tr\').removeClass(\'highlight3\');
                if(dataId)
                {
                    $(\'#PPLholder2\').html(createTable(dataId,\'ppl\'));
                }
                else
                {
                   $(\'#PPLholder2\').html(\'\'); 
                }
            });
    
    
            function createTable(dataId,plType)
            {
                var table = $(\'<table id=\"\'+dataId+\'\" class=\"table table-responsive\">\');
                var data = (plType == \'cpl\') ? cplData[dataId] : pplData[dataId];
                $.each(data, function(i, item) 
                {
                    table.append(\'<tr><td>\' + item + \'</td></tr>\');
                });        
                return table;
            }
    <!--for NORMAL FIXATION HIGHLIGHT - starts-->
            $(\'#cb\').on(\'change keyup\', function () 
            {
                var search = $(this).val();
                var dupactiveCPL = $(\'#\'+$(\'#CPLholder2\').find(\'table\').attr(\'id\'));
                var duppplId = $(\'#PPLholder2\').find(\'table\').attr(\'id\');
                var dupactivePPL = $(\'#\'+duppplId);
    
                if(dupactiveCPL != undefined) dupactiveCPL.find(\'tr\').removeClass(\'highlight highlight2\');
                $(\'#dupaftinc\').val(\'\');
                if(dupactivePPL != undefined) dupactivePPL.find(\'tr\').removeClass(\'highlight3\');
    
                var dupaftinc = 0;
    
                dupactiveCPL.find(\'tr\').find(\'td\').each(function()
                {
                    
                    if($(this).text() == search)
                    {
                        $(this).parent(\'tr\').addClass(\'highlight\');
                        $(this).parent(\'tr\').next().addClass(\'highlight2\');
                        
                        dupaftinc = $(this).parent(\'tr\').next().next().text();
                        $(\'#dupaftinc\').val(dupaftinc);
                        
                        
                    }
                });
                
                if(aftinc > 0)
                {
                    var closest = pplData[duppplId].reduce((prev, curr) => {
                        return Math.abs(curr - dupaftinc) < Math.abs(prev - dupaftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });                
                }
    
                if (closest - dupaftinc > 0) 
                {
                    dupactivePPL.find(\'tr\').find(\'td\').each(function()
                    {
                        if (this.innerHTML == closest) 
                        {
                            $(this).parent(\'tr\').addClass(\'highlight3\');
                            var nb = $(this).parent(\'tr\').text();
                            var nnb = $(this).parent(\'tr\').next().text();
                            
                            $(\'#dupnb\').val(nnb);
                        }
                    });
                }
    
            });
            
    <!--for OPTION FIXATION HIGHLIGHT - Ends-->     
            
        });
        </script>   
        
        
        
        
        
        
        <script>
    $(document).ready(function(){
        $(\'#cl\').on(\'change\', function() {
          
            $(\"#nb\").show();
            $(\"#dupnb\").show();
          
        });
    });
    </script>
    </body>
    </html>

无法理解1st column, two more values, 2nd table column with one immediate higher value to the previous 3rd highlighted value。你能用简单的语言解释一下吗？也许您可以通过示例分享步骤和预期行为。
@SudiptoRoy 在第一组表格单元格中，仅检查输入值的两个值，第三个值将在第二个表格列中突出显示。它工作正常。然而，来到第二组表格列，从第一列突出显示的 3 个连续值和第二列中的一个值。例如。假设比较是在级别 7 和级别 10 之间。输入值为 47600 从当前级别 7 中突出显示在表列 47600、49000 和 50500 中，下一个更高的值将是级别 10 中的 56100。
目前您的代码不适用于 7 级和 10 级之间的比较，当前基本 = 55200。检查我是否正确。
@SudiptoRoy 是的，为什么会这样。其余一切工作正常。缺陷在哪里

标签： html jquery

【解决方案1】：

不确定，但这是您想要的预期行为吗？

$(document).ready(function() {
  $('#dni').on('click', function() {
    $('#pf').val($('#dop').val());
    if (this.value == '1') {
      var revDate = new Date($("#dop").val());
      var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 8));
      var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
      document.querySelector("#nid").value = revisedate;
    } else if (this.value == '2') {
      var revDate = new Date($("#dop").val());
      var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 2));
      var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
      document.querySelector("#nid").value = revisedate;
    }
  });
});
$(function() {
  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, 73200, 75400, 77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
    'le11a': [67700, 69700, 71800, 74000, 76200, 78500, 80900, 83300, 85800, 88400, 91100, 93800, 96600, 99500, 102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
    'le12a': [78800, 81200, 83600, 86100, 88700, 91400, 94100, 96900, 99800, 102800, 105900, 109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
    'le13a': [123100, 123800, 130600, 134500, 138500, 142700, 147000, 151400, 155900, 160600, 165400, 170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900]
  }

  var pplData = {
    'le10b': [56100, 57800, 59500, 61300, 63100, 65000, 67000, 69000, 71100, 73200, 75400, 77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
    'le11b': [67700, 69700, 71800, 74000, 76200, 78500, 80900, 83300, 85800, 88400, 91100, 93800, 96600, 99500, 102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
    'le12b': [78800, 81200, 83600, 86100, 88700, 91400, 94100, 96900, 99800, 102800, 105900, 109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
    'le13b': [123100, 123800, 130600, 134500, 138500, 142700, 147000, 151400, 155900, 160600, 165400, 170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900],
    'le13ab': [131100, 135000, 139100, 143300, 147600, 152000, 156600, 161300, 166100, 171100, 176200, 181500]
  }
  $('#cl').on('change', function() {
    var dataId = $('option:selected', this).data('id');
    $('#cb, #aftinc, #nb').val('');
    $('#CPLholder').find('table tr').removeClass('highlight highlight2');
    $('#PPLholder').find('table tr').removeClass('highlight3');
    if (dataId) {
      $('#CPLholder').html(createTable(dataId, 'cpl'));
      $('#CPLholder2').html(createTable(dataId, 'cpl'));
    } else {
      $('#CPLholder').html('');
      $('#CPLholder2').html('');
    }
  });
  $('#pl').on('change', function() {
    var dataId = $('option:selected', this).data('id');
    $('#cb, #aftinc, #nb').val('');
    $('#CPLholder').find('table tr').removeClass('highlight highlight2');
    $('#PPLholder').find('table tr').removeClass('highlight3');
    if (dataId) {
      $('#PPLholder').html(createTable(dataId, 'ppl'));
      $('#PPLholder2').html(createTable(dataId, 'ppl'));
    } else {
      $('#PPLholder').html('');
      $('#PPLholder2').html('');
    }
  });

  function createTable(dataId, plType) {
    var table = $('<table id="' + dataId + '" class="table table-responsive">');
    var data = (plType == 'cpl') ? cplData[dataId] : pplData[dataId];
    $.each(data, function(i, item) {
      table.append('<tr><td>' + item + '</td></tr>');
    });
    return table;
  }
  <!--for NORMAL FIXATION HIGHLIGHT - starts-->
  $('#cb').on('change keyup', function() {
    var search = $(this).val();
    var activeCPL = $('#' + $('#CPLholder').find('table').attr('id'));
    var pplId = $('#PPLholder').find('table').attr('id');
    var activePPL = $('#' + pplId);

    if (activeCPL != undefined) activeCPL.find('tr').removeClass('highlight highlight2');
    $('#aftinc').val('');
    if (activePPL != undefined) activePPL.find('tr').removeClass('highlight3');
    var aftinc = 0;
    activeCPL.find('tr').find('td').each(function() {
      if ($(this).text() == search) {
        $(this).parent('tr').addClass('highlight');
        $(this).parent('tr').next().addClass('highlight2');
        // ADDED BELOW LINE
        $(this).parent('tr').next().next().addClass('highlight2');
        // ADDED AN EXTRA .next()
        aftinc = $(this).parent('tr').next().next().text();
        $('#aftinc').val(aftinc);
      }
    });
    if (aftinc > 0) {
      var closest = pplData[pplId].reduce((prev, curr) => {
        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
      });
    }
    if (closest - aftinc > 0) {
      activePPL.find('tr').find('td').each(function() {
        if (this.innerHTML == closest) {
          $(this).parent('tr').addClass('highlight3');
          var nb = $(this).parent('tr').text();
          var nnb = $(this).parent('tr').next().text();
          $('#nnb').val(nnb);
          $('#nb').val(nb);
        }
      });
    }
  });
  <!--for NORMAL FIXATION HIGHLIGHT - Ends-->       
});
$(document).ready(function() {
  $('#cl').on('change', function() {
    $("#nb").show();
    $("#nnb").show();
  });
});

.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 {
  display: none;
}

#nnb {
  display: none;
}

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

<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" /></td>
          </tr>
          <tr>
            <td>After one increment<br>(in Previous scale)</td>
            <td><input class="form-control" type="text" name="aftinc" id="aftinc" 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="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/></th>
              </tr>
              <tr>
                <td id="CPLholder">&nbsp;</td>
                <td id="PPLholder">&nbsp;</td>
                <td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off" readonly/></td>
                <!--OPTION FIXATION CONTENT-->
                <td id="CPLholder2">&nbsp;</td>
                <td id="PPLholder2">&nbsp;</td>
                <td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off" readonly/></td>
              </tr>
        </table>
      </div>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

【讨论】：

在应用程序中，有两个表集，名称为 NORMAL FIXATION 和 OPTION FIXATION。在我的问题中，NORMAL FIXATION 可以很好地突出显示 2 个级别的值。然而，无论您现在做什么，都将与 OPTION FIXATION 表集一起发生。 NORMAL 和 OPTION FIXATION 表应该同时工作。