搜索 table 的两列，其中一列隐藏但显示整行结果

Question

是否可以搜索 table 的两列并将其中一列隐藏起来？我想搜索两列，但第 2 列被隐藏，如果有任何匹配，我想查看第 1 列。

这是我一直在尝试使用的：

<html>
<head>
 <style>
 #myTable tr td:nth-child(2){
    display: none;
}
 </style>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 </head>
<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search 
by any part of name or speed code" title="Type in a name">
 <br/>
<table id="myTable">

    <tr>
    <td>Albert Einstein College of Medicine</td>
    <td>cardiac</td>
    </tr>
    <tr>
    <td>Bronx Lebanon Hospital Center</td>
    <td>labor</td>
    </tr>
    <tr>
    <td>Jacobi Medical Center</td>
    <td>stemi</td>
    </tr>
    <tr>
    <td>Lincoln Medical Center</td>
    <td>stroke</td>
    <td></td>
    </tr>
</table>

<script>
var mylist = $('#myTable');
var listitems = mylist.find('tr');
listitems.sort(function(a, b) {
   return 
$(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
</script>
<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  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) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>
</body>
</html>

你可以忽略这个，但它是 TL;DR 部分，因为他们不会让我 post 不添加更多废话。基本上我只想查看第 1 列，但要在第 1 列和第 2 列中搜索结果。如果结果匹配第1列或第2列的输入框我想看第1列

Answer 1

我更改了以下代码，所以现在它还在每个 tr.

中搜索所有 td

td = tr[i].getElementsByTagName("td");
if (td) {
  var t = false;
  $.each(td, function(i,x) {
    if (x.innerHTML.toUpperCase().indexOf(filter) > -1) {
      t = true;
    } 

  })
  tr[i].style.display = t ? "" : "none";
}

演示

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    if (td) {
      var t = false;
      $.each(td, function(i, x) {
        if (x.innerHTML.toUpperCase().indexOf(filter) > -1) {
          t = true;
        }

      })
      tr[i].style.display = t ? "" : "none";
    }
  }
}

var mylist = $('#myTable');
var listitems = mylist.find('tr');
listitems.sort(function(a, b) {
  return
  $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) {
  mylist.append(itm);
});

#myTable tr td:nth-child(2) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search 
by any part of name or speed code" title="Type in a name">
<br/>
<table id="myTable">

  <tr>
    <td>Albert Einstein College of Medicine</td>
    <td>cardiac</td>
  </tr>
  <tr>
    <td>Bronx Lebanon Hospital Center</td>
    <td>labor</td>
  </tr>
  <tr>
    <td>Jacobi Medical Center</td>
    <td>stemi</td>
  </tr>
  <tr>
    <td>Lincoln Medical Center</td>
    <td>stroke</td>
    <td></td>
  </tr>
</table>

搜索 table 的两列，其中一列隐藏但显示整行结果

Search two columns of a table, one hidden but show whole row with results

jquery

hidden

html-table