How to hide, show and re-hide and re-show tr in table in HTML

Question

Supposedly, I have on select option. The table should only displays a row in a table based on my option in select tag.

Let say I choose the first option, and its value is A, other rows which don't contains "A" (only) will be hidden. But when it comes to option BB, supposedly the table only displays the row which only contains text "BB", the third row is successfully hidden, but then the first row is still there.

 $(document).ready(function() { $("button").click(function() { var searchString = $('#enter').find(":selected").text(); $("#mytable tr td:contains('" + searchString + "')").each(function() { if ($(this).text() != searchString) { $(this).parent().hide(); } else { $(this).parent().show(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="enter"> <option value="A">A</option> <option value="BB">BB</option> <option value="CCC">CCC</option> </select> <button>Set text content for all p elements</button> <table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> </tr> </table> 

Is my jQuery correct or it does have a logical error?

Answer 1

For this to work you need to perform an exact match on the contents of the td elements. :contains by default is a greedy match, so searching for A will match all three rows. To fix this you can use filter() :

 $("button").click(function() { var searchString = $('#enter').val(); $("#mytable tr").hide().find('td').filter(function() { return $(this).text().trim() === searchString; }).parent().show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="enter"> <option value="A">A</option> <option value="BB">BB</option> <option value="CCC">CCC</option> </select> <button>Set text content for all p elements</button> <table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> </tr> </table> 

Answer 2

You have to change small thing in your code.. Make your logic like :

1) First Hide all <tr>

2) Then search for the string in <tr> and show them ..

Example in your code :

    $(document).ready(function() {
      $("button").click(function() {
      var searchString = $('#enter').find(":selected").text();
      $('tr').hide(); //<------First Update
      $("#mytable tr td:contains('" + searchString + "')").each(function() {
       $(this).parent().show();  //<------Second update
       });
     });
   });

I do the complete coding also . You can check it..

JSFiddle link : https://jsfiddle.net/cebL4jpv/5/

Answer 3

Your code doesn't account for when a row has been hidden, but then one of the table-cells' siblings do not contain the string. For instance, the each function reaches CC, which doesn't contain BB, and then the parent is shown again.

I've amended your code, hopefully this helps.

 $(document).ready(function() { $("button").click(function() { var searchString = $('#enter').find(":selected").text(); $("#mytable tr td").each(function() { if ($(this).text().indexOf() > -1 || $(this).siblings().text().indexOf(searchString) > -1 ) { $(this).parent().hide(); } else { $(this).parent().show(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="enter"> <option value="A">A</option> <option value="BB">BB</option> <option value="CCC">CCC</option> </select> <button>Set text content for all p elements</button> <table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>AA</td> <td>BB</td> <td>CC</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> </tr> </table> 

Answer 4

your selector "#mytable tr td:contains('" + searchString + "')" starts the loop right 
after it find the element. which was causing the issue . try below

 ` $(document).ready(function() {
      $("button").click(function() {
        var searchString = $('#enter').find(":selected").text();
        var trs = $('#mytable').find('tr');
        trs.each(function(i, ele) {
          $(ele).children('td').each(function(j, ele1) {
            if ($(ele1).text() != searchString) {
              $(ele1).parent().hide();
            } else {
              $(ele1).parent().show();
              return false;
            }
          })
        })
      });
    });`