Question 36981 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

highlight next immediate to input value in html table cell with jquery

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

  2. An input textbox Basic

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

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

here is what I try to achieve with a working demo.
please help me to achieve this

<!DOCTYPE html>
        <html lang="en">
          <head>
            
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <style>
        
        .highlight
        {
        color:red;
        background-color:yellow;
        font-weight:bold;
        }
        </style>
          </head>
          <body>
            <div class="container">
              <div class="row">
            <div class="col-md-6">
              <table width="100%" border="0">
                            
                            <tr>
                                <td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb"  autocomplete="off"/></td>
                                
                            </tr>
                            
                          </table>
                            
                        </div>
            </div>
            </div>
            <table class="table table-responsive">
                <tr>
                    <td><h6>Current Level</h6></td>
                </tr>
                
                <tr>
                    <td>
                    <table id="le10" class="table table-responsive table-striped">
                            
                            <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!--match and highlight the Current basic textbox value with the level table-->
        <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');
          }
        });
        });
        </script>
          </body>
        </html>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    .highlight {
  color: red;
  background-color: yellow;
  font-weight: bold;
}
.highlight2 {
  color: blue;
  background-color: greenyellow;
  font-weight: bold;
}

      <div class="container">
    <div class="row">
      <div class="col-md-6">
        <label for="">Basic</label>
        <input class="form-control" type="text" name="cb" id="cb" autocomplete="off" />
      </div>
    </div>
  </div>
  <table class="table table-responsive">
    <tr>
      <td>
        <h6>Current Level</h6>
      </td>
    </tr>

    <tr>
      <td>
        <table id="le10" class="table table-responsive table-striped">
          <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:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search