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默认为贪婪匹配，因此搜索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）首先隐藏所有$ lua5.2 test.lua Hello World!

2）然后在<tr>中搜索字符串并显示它们..

代码示例：

<tr>

我也做完整的编码。您可以检查一下。

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

如何在HTML表格中隐藏，显示，重新隐藏和重新显示tr

4 个答案: