如何使用 JavaScript 搜索包含所有列的表格

如何使用 JavaScript 搜索包含所有列的表格

我正在使用表格，我想在所有列中按匹配执行搜索。以下代码仅匹配表的第一列数据。但我希望它应该按所有列数据进行搜索。如果您有任何想法我可以做到这一点，请与我分享。提前致谢！

JsFiddle：https ://jsfiddle.net/hbrjy04m/

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

box-sizing: border-box;

}

#myInput {

background-image: url('/css/searchicon.png');

background-position: 10px 10px;

background-repeat: no-repeat;

width: 100%;

font-size: 16px;

padding: 12px 20px 12px 40px;

border: 1px solid #ddd;

margin-bottom: 12px;

}

#myTable {

border-collapse: collapse;

width: 100%;

border: 1px solid #ddd;

font-size: 18px;

}

#myTable th, #myTable td {

text-align: left;

padding: 12px;

}

#myTable tr {

border-bottom: 1px solid #ddd;

}

#myTable tr.header, #myTable tr:hover {

background-color: #f1f1f1;

}

</style>

</head>

<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">

<tr class="header">

<th style="width:60%;">Name</th>

<th style="width:40%;">Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Germany</td>

</tr>

<tr>

<td>Berglunds snabbkop</td>

<td>Sweden</td>

</tr>

<tr>

<td>Island Trading</td>

<td>UK</td>

</tr>

<tr>

<td>Koniglich Essen</td>

<td>Germany</td>

</tr>

<tr>

<td><a href="https://teluguhitflopmovieslist.blogspot.com/">Laughing Bacchus Winecellars</a></td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Italy</td>

</tr>

<tr>

<td>North/South</td>

<td><a href="https://lyricxona.blogspot.com/">UK</a></td>

</tr>

<tr>

<td>Paris specialites</td>

<td><a href="https://castxona.blogspot.com/">France</a></td>

</tr>

</table>

至尊宝的传说

浏览 147回答 4

4回答

紫衣仙女

您可以使用for循环遍历atd中的所有 str并搜索组合文本。function myFunction() {  var input, filter, table, tr, td, i, txtValue;  input = document.getElementById("myInput");  filter = input.value.toUpperCase();  table = document.getElementById("myTable");  tr = table.getElementsByTagName("tr");  for (i = 0; i < tr.length; i++) {    const tableData = tr[i].getElementsByTagName("td");    let allTextContent = '';    for (let ind = 0; ind < tableData.length; ind++) {        allTextContent += tableData[ind].innerText;    }        if (allTextContent) {      if (allTextContent.toUpperCase().indexOf(filter) > -1) {        tr[i].style.display = "";      } else {        tr[i].style.display = "none";      }    }         }}尽管您可以避免额外的循环并textContent改为搜索整行。一些东西也可以重构。更新了小提琴。const searchInput = document.querySelector('#myInput');const tableRows = document.querySelector('#myTable').querySelectorAll('tr');searchInput.addEventListener('input', (e) => {  const searchInputValue = e.target.value.toLowerCase();  tableRows.forEach(row => {    const doesRowMatch = row.textContent.toLowerCase().includes(searchInputValue);    if (doesRowMatch) {      row.style.display = 'table-row';    } else {      row.style.display = 'none';    }  })})

0

0

郎朗坤

const search = document.querySelector("input[name=search]");const table = document.querySelector("#myTable");const rows = table.querySelectorAll("tr");search.addEventListener("input", () => {  rows.forEach(row => {    const matches = row.textContent      .toLowerCase()      .includes(search.value.toLowerCase())    matches ? row.classList.remove("hide") : row.classList.add("hide");  });});* {  box-sizing: border-box;}.hide {  display: none !important;}input[name=search] {  background-image: url('/css/searchicon.png');  background-position: 10px 10px;  background-repeat: no-repeat;  width: 100%;  font-size: 16px;  padding: 12px 20px 12px 40px;  border: 1px solid #ddd;  margin-bottom: 12px;}#myTable {  border-collapse: collapse;  width: 100%;  border: 1px solid #ddd;  font-size: 18px;}#myTable th,#myTable td {  text-align: left;  padding: 12px;}#myTable tr {  border-bottom: 1px solid #ddd;}#myTable tr.header,#myTable tr:hover {  background-color: #f1f1f1;}<h2>My Customers</h2><input type="text" name="search" placeholder="Search for names.." title="Type in a name"><table id="myTable">  <thead>    <tr class="header">      <th style="width:60%;">Name</th>      <th style="width:40%;">Country</th>    </tr>  </thead>  <tbody>    <tr>      <td>Alfreds Futterkiste</td>      <td>Germany</td>    </tr>    <tr>      <td>Berglunds snabbkop</td>      <td>Sweden</td>    </tr>    <tr>      <td>Island Trading</td>      <td>UK</td>    </tr>    <tr>      <td>Koniglich Essen</td>      <td>Germany</td>    </tr>    <tr>      <td><a href="https://teluguhitflopmovieslist.blogspot.com/">Laughing Bacchus Winecellars</a></td>      <td>Canada</td>    </tr>    <tr>      <td>Magazzini Alimentari Riuniti</td>      <td>Italy</td>    </tr>    <tr>      <td>North/South</td>      <td><a href="https://lyricxona.blogspot.com/">UK</a></td>    </tr>    <tr>      <td>Paris specialites</td>      <td>France</td>    </tr>  </tbody></table>

0

0

守着星空守着你

function myFunction() { var input, filter, table, tr, td, i, txtValue; 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("td")[0];   if (td) {     txtValue = td.textContent || td.innerText;     if (txtValue.toUpperCase().indexOf(filter) > -1) {       tr[i].style.display = "";       i++;     } else {       tr[i].style.display = "none";     }   }     td = tr[i].getElementsByTagName("td")[1];   if (td) {     txtValue = td.textContent || td.innerText;     if (txtValue.toUpperCase().indexOf(filter) > -1) {       tr[i].style.display = "";     } else {       tr[i].style.display = "none";     }   }        }}https://jsfiddle.net/cjb1rx6f/1/这有效，但其他答案更好......

0

0

慕田峪9158850

即使您增加列数，这也应该有效基本上，您遍历所有TD内部TR，如果找到一个匹配项，则转到下一行。function myFunction() {  var input, filter, table, tr, td, i, txtValue;  input = document.getElementById("myInput");  filter = input.value.toUpperCase();  table = document.getElementById("myTable");  tr = table.getElementsByTagName("tr");  for (i = 0; i < tr.length; i++) {    tds = tr[i].getElementsByTagName("td")    var foundInRow = false    for(j=0; j<tds.length; j++){    if(foundInRow)        continue    td = tr[i].getElementsByTagName("td")[j];    if (td) {      txtValue = td.textContent || td.innerText;      if (txtValue.toUpperCase().indexOf(filter) > -1) {        foundInRow = true        tr[i].style.display = "";      } else {        tr[i].style.display = "none";      }    }          }  }}

0

0

随时随地看视频慕课网APP

相关分类

JavaScript