JavaScript如何实现tr内所有td值满足条件时显示/隐藏对应表格行

你需要逐行校验该行所有td的文本是否全部匹配目标值，避免只要存在匹配单元格就触发操作的问题，同时要注意:contains是模糊匹配，建议换成精确文本匹配更稳妥。

修改后完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="contains" >contains text2
<br/>

<table border="1" style="text-align:center;" id="targetTable">
  <tr>
    <th>Name</th><th>Lastname</th><th>备注</th>
  </tr>
  <!-- 测试用全匹配行 -->
  <tr>
    <td>text2</td><td>text2</td><td>text2</td>
  </tr>
  <tr>
    <td>text1</td><td>text2</td><td>text2</td>
  </tr>
  <tr>
    <td>text3</td><td>text4</td><td>text4</td>        
  </tr>
</table>

<script>
$('#contains').change( function() {
  // 遍历所有数据行，排除表头行
  $('#targetTable tr:not(:has(th))').each(function() {
    const $tds = $(this).find('td');
    // 校验当前行所有td的文本都等于text2
    const allMatch = $tds.toArray().every(td => td.textContent.trim() === 'text2');
    if (allMatch) {
      $(this).toggle();
    }
  });
});
</script>

逻辑说明 #

• 用tr:not(:has(th))过滤掉表头行，只校验数据行
• 把一行内的所有td转成数组后用every方法做全匹配校验，只有所有td的文本都等于目标值才返回true
• 仅对全匹配的行执行toggle操作

如果你需要的是更通用的逻辑：只要一行内所有td的值完全相等（不管值是什么）就触发显隐，只需要修改校验逻辑即可：

const allMatch = $tds.toArray().every(td => td.textContent.trim() === $tds.eq(0).text().trim());

内容的提问来源于stack exchange，提问作者Tro Chee Tron