通过HTML表格列搜索

Question

我正在开发一个包含实时搜索的网站。此实时搜索用于搜索联系人列表中的联系人（HTML表格）。联系人列表是一个包含2列的表格，每列包含一个联系人。搜索工作，但它返回整行，而不仅仅是匹配的列。

这意味着如果我在下面的代码片段中查找表格中的A;搜索返回整行（A || B），而不仅仅是A.有没有什么办法可以改进我的函数来搜索列而不是行？

希望我解释清楚。

<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    </tr> 
 
</table>

功能

<script>  
      function myFunction() { 
       //variables 
       var input, filter, table, tr, td, i; 
       input = document.getElementById("search"); 
       filter = input.value.toUpperCase(); 
       table = document.getElementById("table"); 
       tr = table.getElementsByTagName("tr"); 

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

Answer 1

我修改代码来遍历所有你的表格中td元素。而不是隐藏不包含过滤器文本的单元格，我选择对它们应用不透明度。它在示例中更清晰地说明正在发生的事情。

在按键上做功时，不要忘记消除事件。看到这个帖子了一个很好的介绍：https://davidwalsh.name/javascript-debounce-function

function myFunction() { 
 
    //variables 
 
    var 
 
    input = document.getElementById("search"), 
 
    filter = input.value.toUpperCase(), 
 
    table = document.querySelector('table'), 
 
    cells = table.querySelectorAll('td'); 
 

 
    for (var i = 0; i < cells.length; i++) { 
 
    var cell = cells[i]; 
 
    if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     cell.classList.remove('no-match'); 
 
    } else { 
 
     cell.classList.add('no-match'); 
 
    } 
 
    } 
 
} 
 

 
const 
 
    form = document.getElementById('form'), 
 
    input = document.getElementById("search"); 
 
    
 
form.addEventListener('submit', onFormSubmit); 
 
input.addEventListener('keyup', onKeyUp); 
 

 
function onFormSubmit(event) { 
 
    event.preventDefault(); 
 
    myFunction(); 
 
} 
 

 
function onKeyUp(event) { 
 
    // Debounce this event in your code or you will run into performance issues. 
 
    myFunction(); 
 
}

.no-match { 
 
opacity: .2; 
 
}

<form id="form"> 
 
    <label> 
 
    Filter text 
 
    <input type="text" id="search"/> 
 
    </label> 
 
    <button>Filter</button> 
 
</form> 
 

 
<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    </tr> 
 
</table>