javascript - 如何使用简单的 javascript 过滤 html 表格?
问题描述
我有一个过滤表格的代码。它将仅基于第一列进行过滤。如何让它单独过滤第二列。另外如何过滤完整的表?
我无法弄清楚这样做的方法。我试图在没有任何其他外部库的情况下获得帮助。
<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>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
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) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
解决方案
过滤所有 Html 表:
const myFunction = () => {
const trs = document.querySelectorAll('#myTable tr:not(.header)')
const filter = document.querySelector('#myInput').value
const regex = new RegExp(filter, 'i')
const isFoundInTds = td => regex.test(td.innerHTML)
const isFound = childrenArr => childrenArr.some(isFoundInTds)
const setTrStyleDisplay = ({ style, children }) => {
style.display = isFound([
...children // <-- All columns
]) ? '' : 'none'
}
trs.forEach(setTrStyleDisplay)
}
input#myInput { width: 220px; }
table#myTable { width: 100%; }
table#myTable th { text-align: left; padding: 20px 0 10px; }
<input
type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Search for names or countries.."
title="Type in a name or a country">
<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>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
仅过滤特定的 Html 表列
- 国家,在这种情况下,它是索引为 1 的列
const myFunction = () => {
const columns = [
{ name: 'Name', index: 0, isFilter: false },
{ name: 'Country', index: 1, isFilter: true }
]
const filterColumns = columns.filter(c => c.isFilter).map(c => c.index)
const trs = document.querySelectorAll(`#myTable tr:not(.header)`)
const filter = document.querySelector('#myInput').value
const regex = new RegExp(escape(filter), 'i')
const isFoundInTds = td => regex.test(td.innerHTML)
const isFound = childrenArr => childrenArr.some(isFoundInTds)
const setTrStyleDisplay = ({ style, children }) => {
style.display = isFound([
...filterColumns.map(c => children[c]) // <-- filter Columns
]) ? '' : 'none'
}
trs.forEach(setTrStyleDisplay)
}
input#myInput { width: 220px; }
table#myTable { width: 100%; }
table#myTable th { text-align: left; padding: 20px 0 10px; }
<input
type="text"
id="myInput"
onkeyup="myFunction()"
placeholder="Search for names or countries.."
title="Type in a name or a country">
<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>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
推荐阅读
- c++ - 在 C++ 中,调用派生构造函数是否会创建一个基对象?
- python - 二进制 DataFrame 到字典
- mongodb - 码头工人 | 姜戈 | MongoDB 困境
- python - 如何从客户端服务器获取数据
- android - Android:新的 BufferedReader(新的 FileReader - 导致捕获错误
- continuous-integration - npm 错误!git@github.com:权限被拒绝(公钥)。在 GitHub 操作中
- jekyll - 网站没有在 jekyll 中呈现我的内容
- git - 如何逐步将功能分支移动到自己的存储库中?
- ocaml - 如何从元组列表创建记录
- java - 如何将 int 转换为 RelativeLayout 宽度?