使用 JavaScript 中的多列過濾表數據

Question

我正在嘗試制作一個過濾器/搜索表，我正在使用這個站點的 JavaScript。

這是腳本：

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

您可以通過更改 "td = tr[i].getElementsByTagName("td") [0] ;" 中的索引來更改要用作過濾器的列

0 表示將使用第一列，1 表示第二列，依此類推。

使用相同的腳本，如何使用多個列作為過濾器？

編輯：

這是我的“exampletable.php”中的表格：

<input type="text" id="myInput" onKeyUp="myFunction()" placeholder="Search"

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">

 
<?php
    include 'connection.php'; //to connect to my database, "database"
    
    $data = mysqli_query($con, "SELECT*FROM database;");
    while($d = mysqli_fetch_array($data)){
?>
                      
    <table class="table table-bordered" id="myTable" width="100%" cellspacing="0">
    <thead>
    
          <tr>
              <th class="text-center">Name</th>
              <th class="text-center">Age</th>
              <th class="text-center">Hobby</th>
          </tr>
    </thead>

          <tr>
              <td class="text-center"><?php echo $d['name']; ?></td>
              <td><?php echo $d['age']; ?></td>
              <td><?php echo $d['hobby']; ?></td>
          </tr>

    </table>

          <?php } ?>
       

如您所見，我在 JavaScript 中使用 function 列“姓名、年齡和愛好”，如果索引為 0（過濾器列的索引），則第一列（姓名）將用作過濾器.

例如，當我在搜索欄中輸入“Catherine”時，頁面將僅顯示 Name 列中帶有“Catherine”的數據。

我想要做的是使用名稱和愛好列作為過濾器。 因此，假設當我在搜索欄中輸入“貓”時，頁面將只顯示名稱和愛好列中帶有“貓”的數據。

Answer 1

添加另一個 for 循環來評估所有 tds（列）將幫助您。

這可能會有所幫助：

// This variable switch if the filter catch any result
    var isset = false;

    //This loop evalaute all rows
    for (i = 0; i < tr.length; i++) {
        //Here we search for all columns in this row
        //note that we get rid of [0] at the end because we're looking for all
        //tds, not just the first one
        let tds = tr[i].getElementsByTagName("td");
        //Here we evaluate each column for this row
        for (let td of tds) {
            //If td has a value
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    //If the filter catch any result, we show the row
                    isset = true;
                }
            }
        }
        //The decision of show or hide the row is made here because
        //the loop has to evaluate all columns before decide if show or hide the entire row
        if (isset) {
            //If the filter catch any result, we show the row
            tr[i].style.display = "";
        } else {
            //If the filter catch no result, we hide the row
            tr[i].style.display = "none";
        }
        //This is to reset the variable for the next loop
        isset = false;
    }

您的整個 function 將是這樣的：

function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    // This variable switch if the filter catch any result
    var isset = false;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    // This variable switch if the filter catch any result
    var isset = false;

    //This loop evalaute all rows
    for (i = 0; i < tr.length; i++) {
        //Here we search for all columns in this row
        //note that we get rid of [0] at the end because we're looking for all
        //tds, not just the first one
        let tds = tr[i].getElementsByTagName("td");
        //Here we evaluate each column for this row
        for (let td of tds) {
            //If td has a value
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    //If the filter catch any result, we show the row
                    isset = true;
                }
            }
        }
        //The decision of show or hide the row is made here because
        //the loop has to evaluate all columns before decide if show or hide the entire row
        if (isset) {
            //If the filter catch any result, we show the row
            tr[i].style.display = "";
        } else {
            //If the filter catch no result, we hide the row
            tr[i].style.display = "none";
        }
        //This is to reset the variable for the next loop
        isset = false;
    }
}

我已經用這個腳本測試了代碼

<input type="text" id="myInput" onKeyUp="myFunction()" placeholder="Search">



<table class="table table-bordered" id="myTable" width="100%" cellspacing="0">
    <thead>

        <tr>
            <th class="text-center">Name</th>
            <th class="text-center">Age</th>
            <th class="text-center">Hobby</th>
        </tr>
    </thead>

    <tr>
        <td class="text-center">Alejandro</td>
        <td>12</td>
        <td>Football</td>
    </tr>
    <tr>
        <td class="text-center">Peralta</td>
        <td>12</td>
        <td>Alejandro</td>
    </tr>
    <tr>
        <td class="text-center">Casemiro</td>
        <td>12</td>
        <td>Soccer</td>
    </tr>
    <tr>
        <td class="text-center">Moreno</td>
        <td>12</td>
        <td>Tenis</td>
    </tr>
    <tr>
        <td class="text-center">Alejandro</td>
        <td>12</td>
        <td>Moreno</td>
    </tr>

</table>

<script>
function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    // This variable switch if the filter catch any result
    var isset = false;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    // This variable switch if the filter catch any result
    var isset = false;

    //This loop evalaute all rows
    for (i = 0; i < tr.length; i++) {
        //Here we search for all columns in this row
        //note that we get rid of [0] at the end because we're looking for all
        //tds, not just the first one
        let tds = tr[i].getElementsByTagName("td");
        //Here we evaluate each column for this row
        for (let td of tds) {
            //If td has a value
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    //If the filter catch any result, we show the row
                    isset = true;
                }
            }
        }
        //The decision of show or hide the row is made here because
        //the loop has to evaluate all columns before decide if show or hide the entire row
        if (isset) {
            //If the filter catch any result, we show the row
            tr[i].style.display = "";
        } else {
            //If the filter catch no result, we hide the row
            tr[i].style.display = "none";
        }
        //This is to reset the variable for the next loop
        isset = false;
    }
}
</script>