Question

我创建了一个从数据库输出数据的表。我添加了一个适用于1列的搜索栏，但我的目标是让它适用于表格中的两列：＆＃39; Locatie＆＃39;专栏和＆＃39; Nr。＆＃39;柱。除此之外（但不太重要）我希望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 您需要登录：用户名＆＃39; 1＆＃39;和密码＆＃39; Hallo＆＃39;

我在页面顶部和底部包含页眉，页脚等，我并不认为它们与此问题相关。我希望你们能帮助我。

Answer 1

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

在这一行中，当您在返回的0元素列表中访问索引<p>处的元素时，您偶然会从“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";
  }
}

可能的改进：

请勿使用innerHTML进行过滤。从名称可以看出，它返回段落元素的HTML内容。目前，段落元素可能不包含HTML元素，但将来它可能会。因此，最好使用innerText过滤数据 - 只包含元素中的可见文本。

不是通过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>

这样做可以让以后更容易更改标记。例如，如果在“Status”和“Locatie”之间添加另一列，则基于索引的选择器会给出不正确的结果。

从表中的多列搜索数据

1 个答案: