在 JavaScript 中使用多列过滤表数据

Question

我正在尝试制作一个过滤器/搜索表，我正在使用来自 this site. 的 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 中的函数拥有列“姓名、年龄和爱好”，如果索引为 0（过滤列的索引），则将使用第一列（姓名）作为过滤器。

例如，当我在搜索栏中输入“Catherine”时，页面将只显示名称列中带有“Catherine”的数据。

我想做的是同时使用 Name 和 Hobby 列作为过滤器。因此，假设当我在搜索栏中输入“猫”时，页面将只显示名称和爱好列中带有“猫”的数据。

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

    <tbody id="myTable">
        <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>
    </tbody>

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