过滤HTML表格

时间:2018-10-02 13:08:31

标签: javascript php html

我已经在一些HTML标记旁边找到了这个JS,并更改了id,使其代表了我的表类和输入类。但是不知何故,它不起作用。对我做错了什么建议吗?

如果我输入原始代码并在代码中创建了简单表,它的工作就像一个魅力。

function filteringTable() {
  var input, filter, table, tr, td, i;
  input = document.getElementsByClassName("tableFilter");
  filter = input.value.toUpperCase();
  table = document.getElementsByClassName("tableSqlContent");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerTEXT.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<input type="text" class="tableFilter" onkeyup="filteringTable()" placeholder="Søg kunde..">

<table class="tableSqlContent">
  <tr>
    <th>Connectionstring</th>
    <th>Klinik Navn</th>
    <th>IP_Adresse</th>
    <th>P-nummer</th>
    <th>Systemtype</th>
    <th>Version</th>
  </tr>

  <?php
    foreach($dbh->query($query) as $rows){
  ?>
    <tr>
      <td><?php echo $rows['ConnectionString']?></td>
      <td><?php echo $rows['Name']?></td>
      <td><?php echo $rows['IP_Adresse']?></td>
      <td><?php echo $rows['Ydernummer']?></td>
      <td><?php echo $rows['Systemtype']?></td>
      <td><?php echo $rows['Version']?></td>
    </tr>
  <?php
    }
  ?>
</table>

1 个答案:

答案 0 :(得分:0)

这对您有用吗?它对我有用

<script>
function filteringTable() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("keyword").value;
  filter = input.toUpperCase();
  table = document.getElementById("results");

  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerText.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>


<input type="text" class="tableFilter" onkeyup="filteringTable()" id="keyword" placeholder="Søg kunde..">

<table class="tableSqlContent" id="results">
  <tr>
    <th>Connectionstring</th>
    <th>Klinik Navn</th>
    <th>IP_Adresse</th>
    <th>P-nummer</th>
    <th>Systemtype</th>
    <th>Version</th>
  </tr>

    <tr>
      <td>conn a</td>
      <td> name a</td>
      <td>IP A</td>
      <td>afasd</td>
      <td>asdad</td>
      <td>V1</td>
    </tr>

        <tr>
      <td>conn B</td>
      <td> name B</td>
      <td>IP B</td>
      <td>afasd</td>
      <td>asdad</td>
      <td>V2</td>
    </tr>
</table>

您遇到了很多问题,首先我在表和搜索栏上附加了一个ID,这比仅按类查找要好,脚本现在将按ID查找元素

在尝试读取TD的内容时,您还拥有InnterTEXT,而不是InnerText

如果这对您不起作用,请告诉我