从表中的多个列中搜索数据

Question

我已经制作了一个从数据库输出数据的表。 我添加了一个适用于1列的搜索栏，但我的目标是使其适用于表中的两列：“ Locatie”列和“ Nr”。 柱。 除此之外（但不太重要），我希望thead在搜索某些内容时保持可见。 现在它消失了，只显示搜索到的数据。

我的代码如下：

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



<div class="titel-top">


  <div class="col-xs-10">
    <div class="input-group">
  <input type="text" class="form-control" id="myInput" placeholder="Zoeken naar locatie..." onkeyup="myFunction()">
  <!--<span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Zoeken</button>
  </span>-->
</div>
  </div>



</div>



<?php
$page_title = "Sensors";
?>

<div class="row">

<table class="table" id="myTable">
<thead>
  <tr>
    <th><p class="text-14">Status</p></th>
    <th><p class="text-14">Locatie</p></th>
    <th><p class="text-14">Nr.</p></th>
    <th><p class="text-14">Sensors</p></th>
    <th></th>
  </tr>
</thead>
<tbody>

  <tr>
    <td><div id="status"></div></td>
    <td><p class="text-12"><?php echo $locatie ?></p></td>
    <td><p class="text-12"><?php echo $huisnummer ?></p></td>
    <td><p class="text-12">5</p></td>
    <td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24">
    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
    </svg></td>
  </tr>
  </tbody>
  </table>
</div>


<?php
//bekijkt of één van de waardes rood is.
if($co2 >1000 OR $humidity >80 OR $temperature >25 OR $temperature <9 OR $humidity <30) {
?>
<script>
    document.getElementById("status").style.backgroundColor = "#ff1744";
</script>

<?php 
 //bekijkt of één van de waardes oranje is.
}
elseif ($co2 >800 OR $humidity >60 OR $temperature >20 OR $temperature >9 OR $humidity >30) { 
?>
<script>
    document.getElementById("status").style.backgroundColor = "#dc9b10";
</script>
<?php
 //Als er geen rode of oranje status is wordt de status groen.
}else { //maakt status groen.

?>
<script>
    document.getElementById("status").style.backgroundColor = "#51c53f";
</script>

<?php
}
?>

该表可以在网站上找到： http : //st359450.cmd17c.cmi.hanze.nl/senz/verhuurder-sensors.php您将需要登录：用户名'1'和密码'Hallo'

我在页面的顶部和底部包括页眉，页脚等，我认为它们与该问题无关。 我希望你们能帮助我。

Answer 1

 td = tr[i].getElementsByTagName("p")[0]; 

在此行中，当您访问返回的<p>元素列表中索引0处的元素时，您会偶然从“ Locatie”列中获取值。

一种快速解决方案是也从索引1元素读取值，并显示tr元素（如果其中任何一个包含给定的单词）：

var paragraphsInRow = tr[i].getElementsByTagName("p");
var locatie = paragraphsInRow[0];
var nr = paragraphsInRow[1];

if (locatie || nr) {
  if (locatie.innerHTML.toUpperCase().indexOf(filter) > -1
        || nr.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
}

---

可能的改进：

1. 不要使用innerHTML过滤。 从名称可以明显看出，它返回段落元素的HTML内容。 当前，该段落元素可能不包含HTML元素，但将来可能会包含。 因此，最好使用innerText过滤数据-该数据仅包含元素中的可见文本。

2. 与其通过tr[i].getElementsByTagName("p")[0]识别数据，不如使用更好的CSS选择器。 我建议在HTML中设置CSS类，然后使用类似tr[i].querySelector("p.locatie")的后代选择器。 您的HTML应该如下所示：

    <tr> <td><div id="status"></div></td> <!-- Notice the CSS class added here. --> <td><p class="text-12 locatie"><?php echo $locatie ?></p></td> <td><p class="text-12"><?php echo $huisnummer ?></p></td> <td><p class="text-12">5</p></td> <td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24"> <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /> </svg></td> </tr> 

   这样做将使将来更容易更改标记。 例如，如果您在“状态”和“位置”之间添加另一列，则基于索引的选择器将给出错误的结果。