我正在创建一个有4列的表,应该可以搜索。我发现通过在下面的行中添加一(1),让我搜索前两列名为 “设施名称 “和 “主要电话号码”,但我不知道如何让其他两列是可搜索的。我将感激任何帮助,谢谢你
td = tr[i].getElementsByTagName("td")[0,**1**];
function locations() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0, 1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="locations()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Facility Name</th>
<th style="width:30%;">Main Phone Number</th>
<th style="width:40%;">Address</th>
<th style="width:20%;">Contract Type</th>
</tr>
<tr>
<td> testing company A </td>
<td> 855.555.5555 </td>
<td>500 test street </td>
<td> MSP </td>
</tr>
<tr>
<td> testing company B </td>
<td> 855.555.6666</td>
<td> 700 test street</td>
<td> WaaS</td>
</tr>
</table>
解决方案:
我将
- 使用事件监听器
- 映射有文字的单元格的行
- 确保HTML有效
window.addEventListener("load", () => {
const table = document.querySelector("#myTable tbody");
document.getElementById("myInput").addEventListener("input", function() {
const input = this.value.trim();
filter = input.toUpperCase();
// use === 0 instead of >-1 if you want the words to start with filter
const trs = [...table.querySelectorAll("td")].map(cell => {
if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
return cell.closest("tr");
}
});
[...table.querySelectorAll("tr")].forEach(function(tr) {
tr.style.display = input === "" || trs.includes(tr) ? "" : "none"
})
})
})
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" placeholder="Search for names..">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:40%;">Facility Name</th>
<th style="width:30%;">Main Phone Number</th>
<th style="width:40%;">Address</th>
<th style="width:20%;">Contract Type</th>
</tr>
</thead>
<tbody>
<tr>
<td> testing company A </td>
<td> 855.555.5555 </td>
<td>500 test street </td>
<td> MSP </td>
</tr>
<tr>
<td> testing company B </td>
<td> 855.555.6666</td>
<td> 700 test street</td>
<td> WaaS</td>
</tr>
</tbody>
</table>
本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/692.html
赞 (0)
如何解决Shapes.PasteSpecial:无效请求时粘贴位图?
上一篇
2022年6月29日 下午3:59
当访问alpnProtocol属性时,Node.js req与req.stream.session之间的对比。
下一篇
2022年6月29日 下午3:59