如何在HTML表格中隱藏，顯示，重新隱藏和重新顯示tr

Question

據說，我有選擇選項。 該表格僅應基於我在select標記中的選項在表格中顯示一行。

假設我選擇了第一個選項，其值為A，其他不包含“ A”（僅）的行將被隱藏。 但是，當涉及選項BB時，假設該表僅顯示僅包含文本“ BB”的行，則第三行已成功隱藏，但是第一行仍然存在。

 $(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> 

我的jQuery是正確的還是確實存在邏輯錯誤？

Answer 1

為此，您需要對td元素的內容執行完全匹配。 :contains默認:contains貪婪匹配，因此搜索A將匹配所有三行。 要解決這個問題，您可以使用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

您必須在代碼中更改一些小東西。

1）首先隱藏所有<tr>

2）然后在<tr>搜索字符串並顯示它們..

代碼示例：

    $(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
       });
     });
   });

我也做完整的編碼。 您可以檢查一下。

JSFiddle鏈接： https ://jsfiddle.net/cebL4jpv/5/

Answer 3

您的代碼不考慮隱藏行的時間，但是表格單元的同級之一不包含字符串。 例如，每個函數到達CC，其中不包含BB，然后再次顯示父函數。

我已經修改了您的代碼，希望對您有所幫助。

 $(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;
            }
          })
        })
      });
    });`