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

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

JsFiddle：

* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#我的表th，#我的表td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，#myTable tr:悬停{
背景色：#f1f1；
}
我的顾客
名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
加拿大
马加兹尼营养不良
意大利
北/南
巴黎特色酒店
函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}       
}
}

您可以使用

for

循环遍历

tr

中的所有

td

并搜索组合文本

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";
      }
    }       
  }
}

---

您可以使用

for

循环来循环

tr

中的所有

td

s并搜索组合文本

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";
      }
    }       
  }
}

---

即使您增加了列数，这也应该有效

基本上，在

TR

中遍历所有

TD

，如果找到一个匹配项，则转到下一行

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";
      }
    }      
    }
  }
}

函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i

即使您增加了列的数量，这也应该有效

基本上，在

TR

中遍历所有

TD

，如果找到一个匹配项，则转到下一行

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";
      }
    }      
    }
  }
}

函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i

const search=document.querySelector（“输入[name=search]”）；
const table=document.querySelector（“myTable”）；
const rows=table.querySelectorAll（“tr”）；
search.addEventListener（“输入”，（）=>{
rows.forEach（row=>{
const matches=row.textContent
.toLowerCase（）
.includes（search.value.toLowerCase（））
匹配？row.classList.remove（“hide”）：row.classList.add（“hide”）；
});
});
*{
框大小：边框框；
}
.隐藏{
显示：无！重要；
}
输入[名称=搜索]{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#MYTH表，
#myTable td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，
#myTable tr：悬停{
背景色：#f1f1；
}
我的客户
名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
加拿大
马加兹尼营养不良
意大利
北/南
巴黎特色酒店
法国

const search=document.querySelector（“输入[name=search]”）；
const table=document.querySelector（“myTable”）；
const rows=table.querySelectorAll（“tr”）；
search.addEventListener（“输入”，（）=>{
rows.forEach（row=>{
const matches=row.textContent
.toLowerCase（）
.includes（search.value.toLowerCase（））
匹配？row.classList.remove（“hide”）：row.classList.add（“hide”）；
});
});
*{
框大小：边框框；
}
.隐藏{
显示：无！重要；
}
输入[名称=搜索]{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
最低保证金：12
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";
     }
   }       
 }
}