1. I am having a table cell with the heading Current Level.

2. An input textbox Basic

3. If user enters any of the figure of table cell in the input textbox, it would be highlighted.

4. I would like to highlight the immediate next cell value also.

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
   

   .highlight { color:red; background-color:yellow; font-weight:bold; }

                    <tr>
                        <td>Basic</td><td><input  type="text" name="cb" id="cb"  autocomplete="off"/></td>
   
                    </tr>
   
                  </table>
   
                </div>
    </div>
    </div>
    <table >
        <tr>
            <td><h6>Current Level</h6></td>
        </tr>
   
        <tr>
            <td>
            <table id="le10" >
   
                    <tr><td>56100</td></tr>
                    <tr><td>57800</td></tr>
                    <tr><td>59500</td></tr>
                    <tr><td>61300</td></tr>
                    <tr><td>63100</td></tr>
                    <tr><td>65000</td></tr>
                    <tr><td>67000</td></tr>
                    <tr><td>69000</td></tr>
                    <tr><td>71100</td></tr>
                    <tr><td>73200</td></tr>
                    <tr><td>75400</td></tr>
                    <tr><td>77700</td></tr>
                </table>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="js/jquery.min.js"></script>
   

   $(function(){ console.log(''); $('#cb').on('input', function() { var textboxValue = $('#cb').val(); if(textboxValue.length>0) { $('#le10 td').each(function() { var filter = textboxValue.toString().toUpperCase(); if ($(this).html().toString().toUpperCase().indexOf(filter) > -1) { $(this).addClass('highlight'); } else { $(this).removeClass('highlight'); } }); } else { $('#le10 td').removeClass('highlight'); } }); });

CodePudding user response：

.highlight {
  color: red;
  background-color: yellow;
  font-weight: bold;
}
.highlight2 {
  color: blue;
  background-color: greenyellow;
  font-weight: bold;
}

  <div >
    <div >
      <div >
        <label for="">Basic</label>
        <input  type="text" name="cb" id="cb" autocomplete="off" />
      </div>
    </div>
  </div>
  <table >
    <tr>
      <td>
        <h6>Current Level</h6>
      </td>
    </tr>

    <tr>
      <td>
        <table id="le10" >
          <tr>
            <td>56100</td>
          </tr>
          <tr>
            <td>57800</td>
          </tr>
          <tr>
            <td>59500</td>
          </tr>
          <tr>
            <td>61300</td>
          </tr>
          <tr>
            <td>63100</td>
          </tr>
          <tr>
            <td>65000</td>
          </tr>
          <tr>
            <td>67000</td>
          </tr>
          <tr>
            <td>69000</td>
          </tr>
          <tr>
            <td>71100</td>
          </tr>
          <tr>
            <td>73200</td>
          </tr>
          <tr>
            <td>75400</td>
          </tr>
          <tr>
            <td>77700</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

$(function () {
  $('#cb').on('change keyup', function() {
    var search = $(this).val();
    $('table tr td').filter(function() {
        if($(this).text() == search){
          $(this).parent('tr').addClass('highlight');
          $(this).parent('tr').closest('tr').next().addClass('highlight2');
        }else{
          $(this).parent('tr').removeClass('highlight');
          $(this).parent('tr').closest('tr').next().removeClass('highlight2');
        }
    })
  });
});

image

Reference:

• https://api.jquery.com/parent/
• https://api.jquery.com/filter/#filter-selector

CodePudding user response：

If it doesn't matter if the styling occurs on a td or tr, you can use this code to achieve it.

<script>
    $(function(){ 
        console.log(''); 
        $('#cb').on('input', function() { 
            var textboxValue = $('#cb').val(); 
            if(textboxValue.length>0) { 
                $('#le10 td').each(function() { 
                    var filter = textboxValue.toString().toUpperCase(); 
                    if ($(this).html().toString().toUpperCase().indexOf(filter) > -1) { 
                        $(this).addClass('highlight');
                        $(this).closest('tr').next('tr').addClass('highlight'); 
                    } else { 
                        $(this).removeClass('highlight'); 
                        $(this).closest('tr').next('tr').removeClass('highlight'); 
                    } 
                }); 
            } else { 
                $('#le10 td').removeClass('highlight'); 
                $('#le10 tr').removeClass('highlight'); 
            } 
        }); 
    });
 </script>