從表中的多個列中搜索數據

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> 

   這樣做將使將來更容易更改標記。 例如，如果您在“狀態”和“位置”之間添加另一列，則基於索引的選擇器將給出錯誤的結果。