JS 搜索 匹配 添加class

Question

基本的JS实现表格搜索内容，代码如下

function myFunction() { //如果有搜索按钮，定义一个onclick即可
  // 声明变量
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
 
  // 循环表格每一行，查找匹配项
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0]; //这个0时要搜索第1列的内容，以此类推
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {  //如果要区分大小写就去掉这个toUpperCase()
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

我的需求是，如果tr里第三个td（就是详细说明那个）,不搜索的时候这个td是隐藏的，如果搜索到这个tr得时候，这个td就显示出来，这个代码应该怎么写呢

如这个图

Answer 1

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
你可以在循环中添加一个判断条件，检查子元素是否包含搜索内容。如果包含，则显示该行。以下是修改后的代码：

function myFunction() {
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // 循环表格每一行，查找匹配项
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      let found = false;
      // 检查子元素是否包含搜索内容
      const childDivs = tr[i].getElementsByTagName("div");
      for (let j = 0; j < childDivs.length; j++) {
        if (childDivs[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          found = true;
          break;
        }
      }

      if (found || td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

这段代码会在遍历表格的每一行时，检查子元素（如<div>）是否包含搜索内容。如果找到匹配的子元素或者当前行的单元格内容包含搜索内容，则显示该行。

---

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢