在Javascript中搜索表格的多行和多列答案

【问题标题】：Searching through multiple rows and columns of a table in Javascript在Javascript中搜索表格的多行和多列
【发布时间】：2018-07-12 23:59:56
【问题描述】：

我有一个包含多行和多列的表格。我编写了一个函数，该函数当前仅搜索表的第一列和最后一列，但是我不确定为什么会跳过中间列。我尝试添加另一个 for 循环并出现错误。

function function2(){
          var input = document.getElementById("myInput");
          var filter = input.value.toUpperCase();
          var table = document.getElementById("table2c");
          var tr = table.getElementsByTagName("tr");
          var td, tdArr, i, j;
        
          for (i = 0; i < tr.length; i++) {
            tdArr = tr[i].getElementsByTagName("td");
            for (j = 0; j < tdArr.length; j++){
              td = tdArr [j];
              if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
       }

This is my table: 
   <table className="table table-bordered" id="table2c">
                      <tbody>
                      <tr>
                      <th> Header Name: </th>
                      <th> Description: </th>
                      <th> Value: </th>
                      </tr>
        
                      <tr>
                      <td> Authorization </td>
                      <td> security token </td>
                      <td> To be supplied  </td>
                      </tr>
        
                      <tr>
                      <td> Content-Type </td>
                      <td> body of the request </td>
                      <td> applicaiton </td>
                      </tr>
        
                      <tr>
                      <td> API-KEY </td>
                      <td>  ID </td>
                      <td> To be supplied </td>
                      </tr>
        
                      <tr>
                      <td> correlation </td>
                      <td> Unique identifier </td>
                      <td> e.g. control number </td>
                      </tr>
        
                      <tr>
                      <td> name </td>
                      <td> system name  </td>
                      <td> One of: </td>
                      </tr>
                      </tbody>
                      </table>

【问题讨论】：

想要的结果是什么？隐藏所有没有搜索结果的行？
@NinaScholz 是的，这就是结果，它现在正在运行，但它只搜索第一列和最后一列，我也希望能够在中间列中搜索数据跨度>

标签： javascript css html-table

【解决方案1】：

在此处添加中断 if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) { tr[i].style.display = ""; 休息; } 一旦找到结果，您需要停止第二个循环，否则如果在第三列中没有找到该元素，它将隐藏整行

function function2(){
          var input = document.getElementById("myInput");
          var filter = input.value.toUpperCase();
          var table = document.getElementById("table2c");
          var tr = table.getElementsByTagName("tr");
          var td, tdArr, i, j;
        
          for (i = 0; i < tr.length; i++) {
            tdArr = tr[i].getElementsByTagName("td");
            for (j = 0; j < tdArr.length; j++){
              td = tdArr [j];
              if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
                tr[i].style.display = "";
                break;
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
       }

<input type="text" id="myInput" />
<button onclick="function2()">search</button>
This is my table: 
   <table className="table table-bordered" id="table2c">
                      <tbody>
                      <tr>
                      <th> Header Name: </th>
                      <th> Description: </th>
                      <th> Value: </th>
                      </tr>
        
                      <tr>
                      <td> Authorization </td>
                      <td> security token </td>
                      <td> To be supplied  </td>
                      </tr>
        
                      <tr>
                      <td> Content-Type </td>
                      <td> body of the request </td>
                      <td> applicaiton </td>
                      </tr>
        
                      <tr>
                      <td> API-KEY </td>
                      <td>  ID </td>
                      <td> To be supplied </td>
                      </tr>
        
                      <tr>
                      <td> correlation </td>
                      <td> Unique identifier </td>
                      <td> e.g. control number </td>
                      </tr>
        
                      <tr>
                      <td> name </td>
                      <td> system name  </td>
                      <td> One  </td>
                      </tr>
                      </tbody>
                      </table>

【讨论】：

谢谢，这适用于中间列，但现在最后一列不再包含在搜索中 @ramSegev
我修正了我的答案

【解决方案2】：

添加中断；如果找到匹配，则存在 for 循环。

    function function2() {
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var table = document.getElementById("table2c");
        var tr = table.getElementsByTagName("tr");
        var td, tdArr, i, j;

        for (i = 0; i < tr.length; i++) {
            tdArr = tr[i].getElementsByTagName("td");
            for (j = 0; j < tdArr.length; j++) {
                td = tdArr[j];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    }

<input type="text" id="myInput" /> <input type="button" id="search" value="Search" onclick="function2()" />
<table className="table table-bordered" id="table2c">
<tbody>
    <tr>
        <th> Header Name: </th>
        <th> Description: </th>
        <th> Value: </th>
    </tr>

    <tr>
        <td> Authorization </td>
        <td> HMAC security token </td>
        <td> To be supplied by APIGEE </td>
    </tr>

    <tr>
        <td> Content-Type </td>
        <td> Media type of the body of the request </td>
        <td> applicaiton/xml </td>
    </tr>

    <tr>
        <td> X-AMEX-API-KEY </td>
        <td> HMAC ID </td>
        <td> To be supplied by APIGEE </td>
    </tr>

    <tr>
        <td> correlation_id </td>
        <td> Unique identifier to track the consumer request </td>
        <td> e.g. Process control number </td>
    </tr>

    <tr>
        <td> originator_name </td>
        <td> Originating consumer system name  </td>
        <td> One of: GCAP, GDE </td>
    </tr>
</tbody>
</table>

【讨论】：

【解决方案3】：

您可以从第二行开始循环，因为查找会使表头消失。然后，您可以提前关闭所有行并删除 'none' 如果找到的值在行中。那就打破吧。

function function2() {
  var input = document.getElementById("myInput"),
      filter = input.value.toUpperCase(),
      table = document.getElementById("table2c"),
      tr = table.getElementsByTagName("tr"),
      td, tdArr, i, j;

  for (i = 1; i < tr.length; i++) {
    tr[i].style.display = "none";
    tdArr = tr[i].getElementsByTagName("td");
    for (j = 0; j < tdArr.length; j++) {
      td = tdArr[j];
      if (td && td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
      }
    }
  }
}

<input id="myInput" type="text" onchange="function2()">
<table className="table table-bordered" id="table2c">
  <tbody>
    <tr><th> Header Name: </th><th> Description: </th><th> Value: </th></tr>
    <tr><td> Authorization </td><td> HMAC security token </td><td> To be supplied by APIGEE </td></tr>
    <tr><td> Content-Type </td><td> Media type of the body of the request </td><td> applicaiton/xml </td></tr>
    <tr><td> X-AMEX-API-KEY </td><td> HMAC ID </td><td> To be supplied by APIGEE </td></tr>
    <tr><td> correlation_id </td><td> Unique identifier to track the consumer request </td><td> e.g. Process control number </td></tr>
    <tr><td> originator_name </td><td> Originating consumer system name </td><td> One of: GCAP, GDE </td></tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

仅供参考，这是一个使用带有一些 ES6 特性的函数式方法（arrow functions、spread syntax 和 .reduce 方法）的实现：

const filter = () => {

  const input = document.querySelector('#myInput');
  const filter = input.value.toUpperCase();
  
  const table = document.querySelector('#table2c');
  const trs = table.querySelectorAll('tr:not(:first-child)');
  
  // loop through all <tr> except the first one (header)
  trs.forEach(tr => {
  
    // reduce all the row's content (header, description and value) to a single string)
    const content = [...tr.children].reduce((content, td) => content + ' ' + td.textContent, '')
    
    // search if the filter is in content
    if(content.toUpperCase().includes(filter)) {
    
      tr.style.display = "";
    
    } else {

      tr.style.display = "none";
    
    }

  });

}

// add an event listener to the input element
document.querySelector('#myInput').addEventListener('keyup', filter);

<input id="myInput" />

<table className="table table-bordered" id="table2c">
  <tbody>
    <tr>
      <th> Header Name: </th>
      <th> Description: </th>
      <th> Value: </th>
    </tr>

    <tr>
      <td> Authorization </td>
      <td> HMAC security token </td>
      <td> To be supplied by APIGEE </td>
    </tr>

    <tr>
      <td> Content-Type </td>
      <td> Media type of the body of the request </td>
      <td> applicaiton/xml </td>
    </tr>

    <tr>
      <td> X-AMEX-API-KEY </td>
      <td> HMAC ID </td>
      <td> To be supplied by APIGEE </td>
    </tr>

    <tr>
      <td> correlation_id </td>
      <td> Unique identifier to track the consumer request </td>
      <td> e.g. Process control number </td>
    </tr>

    <tr>
      <td> originator_name </td>
      <td> Originating consumer system name </td>
      <td> One of: GCAP, GDE </td>
    </tr>
  </tbody>
</table>

【讨论】：