Question

我有一个包含多行和多列的表。我编写了一个函数，该函数当前仅搜索表的第一列和最后一列，但是我不确定为什么跳过中间列。我尝试添加另一个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>

Answer 1

添加中断；如果找到匹配项，则会存在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>

Answer 2

您可以从第二行开始循环，因为查找将消失在表头上。然后，您可以预先关闭所有行，如果发现的值在行中，则删除'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>

Answer 3

在此处添加中断如果（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>

Answer 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>

在JavaScript中搜索表格的多行和多列

4 个答案: