HTML表格过滤/搜索

Question

我想在HTML表格中进行过滤或搜索。

每列上方都有一个输入字段，您可以在其中输入搜索查询。

如果您在字段中输入内容，表格将被过滤。如果您现在在其他字段中键入内容，则仅应过滤显示的表行。

在我的代码中，所有行均在第二个输入上进行过滤。 我也不想在td元素中搜索整个文本。我想从td元素的值的开头搜索。

<table id="bestand" style="width: 100%; overflow-y: hidden; overflow-x: auto; display: block;">
  <tr class="header">
    <th>Projekt Nummer</th>
    <th>Projekt Name</th>
    <th>Inhalt</th>
    <th>Bauort</th>
    <th>Standort</th>
    <th>Ausleihdatum</th>
    <th>Nutzer</th>
  </tr>
  <tr class="header">
    <td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
    <td><input type="text" [(ngModel)]="query_2" (ngModelChange)="search_2()"></td>
    <td><input type="text" [(ngModel)]="query_3" (ngModelChange)="search_3()"></td>
    <td><input type="text" [(ngModel)]="query_4" (ngModelChange)="search_4()"></td>
    <td><input type="text" [(ngModel)]="query_5" (ngModelChange)="search_5()"></td>
    <td><input type="text" [(ngModel)]="query_6" (ngModelChange)="search_6()"></td>
    <td><input type="text" [(ngModel)]="query_7" (ngModelChange)="search_7()"></td>
  </tr>
</table>

search_1() {
  let input_1 = this.query_1;
  let filter_1 = input_1.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_0 = tr[i].getElementsByTagName("td")[0];
    if (td_0) {
      let value_0 = td_0.textContent || td_0.innerText;
      if (value_0.toUpperCase().indexOf(filter_1) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_2() {
  let input_2 = this.query_2;
  let filter_2 = input_2.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_1 = tr[i].getElementsByTagName("td")[1];
    if (td_1) {
      let value_1 = td_1.textContent || td_1.innerText;
      if (value_1.toUpperCase().indexOf(filter_2) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_3() {
  let input_3 = this.query_3;
  let filter_3 = input_3.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_2 = tr[i].getElementsByTagName("td")[2];
    if (td_2) {
      let value_2 = td_2.textContent || td_2.innerText;
      if (value_2.toUpperCase().indexOf(filter_3) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_4() {
  let input_4 = this.query_4;
  let filter_4 = input_4.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_3 = tr[i].getElementsByTagName("td")[3];
    if (td_3) {
      let value_3 = td_3.textContent || td_3.innerText;
      if (value_3.toUpperCase().indexOf(filter_4) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_5() {
  let input_5 = this.query_5;
  let filter_5 = input_5.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_4 = tr[i].getElementsByTagName("td")[4];
    if (td_4) {
      let value_4 = td_4.textContent || td_4.innerText;
      if (value_4.toUpperCase().indexOf(filter_5) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_6() {
  let input_6 = this.query_6;
  let filter_6 = input_6.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_5 = tr[i].getElementsByTagName("td")[5];
    if (td_5) {
      let value_5 = td_5.textContent || td_5.innerText;
      if (value_5.toUpperCase().indexOf(filter_6) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

search_7() {
  let input_7 = this.query_7;
  let filter_7 = input_7.toUpperCase();
  let tr = $("#bestand").find("tr");

  for (let i = 2; i < tr.length; i++) {
    let td_6 = tr[i].getElementsByTagName("td")[6];
    if (td_6) {
      let value_6 = td_6.textContent || td_6.innerText;
      if (value_6.toUpperCase().indexOf(filter_7) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}