Question

我正在使用PHP和MySQL来构建HTML表。我正在尝试使用JavaScript来过滤/搜索表，并仅显示具有我需要的结果的行。我希望JavaScript输入能够搜索表的多个<td>。我能够让这个工作，但它不是一个优雅的解决方案，以放大表。

我确信有更好的方法可以选择搜索的内容，但却无法找到任何内容。有没有人知道如何让这个代码更灵活地用于不同的列宽表？

    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];
        td1 = tr[i].getElementsByTagName("td")[1];
        if (td+td1) {
          if ((td.innerHTML.toUpperCase().indexOf(filter)+td1.innerHTML.toUpperCase().indexOf(filter)) > -2) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
    }

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in anything">
    
    <table id="myTable">
      <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
      <tr>
        <td>North/South</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Paris specialites</td>
        <td>France</td>
      </tr>
    </table>

Answer 1

你可以改进很多。首先要记住要明确声明变量，否则它们会变成全局变量。

此解决方案不依赖于任何特定数量的列。无论有多少都可以使用。

请参阅内联评论了解更多信息：

＆＃13;

// Get DOM references just once:
var input = document.getElementById("myInput");
var table = document.getElementById("myTable");

// Do event binding in JavaScript, not HTML
input.addEventListener("keyup", filter);
input.addEventListener("search", filter);

// Get all rows, except the header and convert to array so .forEach() can be used to loop
var rows = Array.prototype.slice.call(table.querySelectorAll("tr:not(.header)"));  

function filter() {
  // Always trim user input
  var filter = input.value.trim().toUpperCase();

  // Loop the rows
  rows.forEach(function(row) {
  
    // You really don't need to know if the search criteria
    // is in the first or second cell. You only need to know
    // if it is in the row.
    var data = "";
    // Loop over all the cells in the current row and concatenate their text
    Array.prototype.slice.call(row.getElementsByTagName("td")).forEach(function(r){
      // Don't use .innerHTML unless there is HTML. Use textContent when there isn't.
      data += r.textContent;  
    });

    // Check the string for a match and show/hide row as needed
    // Don't set individual styles. Add/remove classes instead
    if(data.toUpperCase().indexOf(filter) > -1){
      // show row
      row.classList.remove("hidden");
    } else {
      // hide row
      row.classList.add("hidden");
    }
  });
  
}

＆＃13;

input[type=search]{
  border-radius:10px;
  outline:0;
  padding:3px;
}

input[type=search]:focus{
  box-shadow:0 0 4px blue;
}

.hidden { display:none; }
.leftHeader { width:60%; }
.rightHeader { width:40%; }

＆＃13;

<!-- Use the actual "search" input type and don't do inline CSS or JavaScript -->
<input type="search" id="myInput" placeholder="Search" title="Type in anything">
    
<table id="myTable">
  <tr class="header">
    <th class="leftHeader">Name</th>
    <th class="rightHeader">Country</th>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

＆＃13;

JavaScript单输入搜索多个html表列

1 个答案: