Question

我首先创建表格布局（标题如下）：

//DB Connection already established
$sql = "SHOW COLUMNS FROM fairtrade;";
$result = $dbConnection->query($sql);

if($result->num_rows > 0){
  echo "<th>&ensp;</th>";
  while($row = $result->tech_assoc()){
    echo "<th>" . $row['Field'] . "</th>";
  }
}

这很好用。然后我用数据填充表格。（这是一个巨大的表格，这就是为什么我只举一个简短的例子）：

//DB Connection already established
$sql = "SELECT * FROM fairtrade;";
$result = $dbConnection->query($sql);

if($result->num_rows > 0 ){
  while($row = $result->fetch_assoc()){
  //use div to be able to resize the cells
    echo "<tr><td><div class="tablediv">" . $row['ID'] . "</div></td>
          <td><div class=tablediv>" . $row['Gender'] . "</div></td></tr>";
  }
}

所以这也很好。我有一个<select id=filter_for>和一个<input type=text id=filter_value>，而javascript的过滤方式如下：

function myFunction() {
// Declare variables
var input, filter, table, tr, td, i,countert,counterval;
input = document.getElementById("filter_value");
filter = input.value.toUpperCase();
table = document.getElementById("fairtrade_table");
tr = table.getElementsByTagName("tr");
countert = document.getElementById("filter_for");
counterval = countert.options[countert.selectedIndex].value;

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

这再次正常。并根据从<select>中选择的值，在该列中搜索该特定值。

所以。 如何更改此过滤器？

我希望能够搜索多个内容。

例如，您有一个包含四列[ID] [GENDER] [LASTNAME] [NAME]的表格。如果有人选择了多个值（例如2），则[GENDER]和[NAME]。过滤器在两列中搜索。值之间用“，”分隔。因此，我的输入应如下所示：“男，乔治”。这应该给我所有有关每个叫乔治的男性的信息。

第二个问题。

是否可以更改此过滤器或为表头添加新的过滤器？让我们从上面的示例开始，分为四列。但是现在我们只希望将其作为条件（因为select具有表头中的所有值）。因此，该选择具有值ID，性别，姓氏，名称。如果我选择ID，那么我只会看到ID列（但所有行），如果我选择ID和GENDER，则这两列都显示为所有行。这怎么可能？

我在搜索“ Javascript表过滤器”时发现的所有内容都是一个值过滤器。

感谢您的时间。

来自过滤器的Javascript动态表

0 个答案: