按元素名称筛选表

Question

我试图通过在搜索表单中写入一些文本来过滤这个HTML表，这很有效，但每当它进行过滤时，元素都会尝试填充表的整个宽度，而不是保持其原始元素宽度(表宽度的25%，不计算单元格之间的空格(。

function searchFilter () {
const input = document.getElementById('myInput');
const filter = input.value.toUpperCase();
const table = document.getElementById('tablaPiola');
const articule = table.getElementsByTagName('td');
for (i = 0; i < articule.length; i++) {
a = articule[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
articule[i].style.display = "";
} else {
articule[i].style.display = "none";
}
}
}
document.getElementById("filter-btn").addEventListener("click", searchFilter);

body {
background-color: black;
}
table
{border-spacing: 20px;
table-layout: fixed;
width: 600px;
margin: auto;
margin-top: 10px;}
td
{text-align: center;
border-radius: 10px;}
td a
{width: 100%;
display: block;
line-height: 50px;
text-decoration: none;
font-family: "Poppins";
font-weight: 700;
font-size: 12px;
color: white;}
.automatizaciones
{background-image: url("https://via.placeholder.com/100/0000FF/0000FF");
background-size: cover;}
.bpm_a_ms
{background-image: url("https://via.placeholder.com/100/0000FF/0000FF");
background-size: cover;}
.compresion
{background-image: url("https://via.placeholder.com/100/0000FF/0000FF");
background-size: cover;}
.compresion_multibanda
{background-image: url("https://via.placeholder.com/100/0000FF/0000FF");
background-size: cover;}

<input type="text" id="myInput">
<input type="button" id="filter-btn" value="Apply">
<table class="tabla_basico" id="tablaPiola">
<tr>
<td class="automatizaciones">
<div class="overlay_basico"><a href="/">AUTOMATIZACIONES</a></div>
</td>
<td class="bpm_a_ms">
<div class="overlay_intermedio"><a href="/">BPM A MS</a></div>
</td>
<td class="compresion">
<div class="overlay_basico"><a href="compresion.html">COMPRESIÓN</a></div>
</td>
<td class="compresion_multibanda">
<div class="overlay_intermedio"><a href="/">COMPRESIÓN MULTIBANDA</a></div>
</td>
</tr>
</table>

这是我的网页

这就是它过滤的方式

Answer 1

我最初认为visibility: hidden，但您指出，这意味着显示的内容不再在左侧。

我唯一的另一个想法是在末尾添加填充单元格：

function searchFilter () {
const input = document.getElementById('myInput');
const filter = input.value.toUpperCase();
const table = document.getElementById('tablaPiola');
// Remove any fillers we added last time
table.querySelectorAll(".filler").forEach(filler => {
filler.parentNode.removeChild(filler);
});
const articule = table.getElementsByTagName('td');
// Remember how many are showing at the end
let showing = 0;
for (i = 0; i < articule.length; i++) {
a = articule[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
articule[i].style.display = "";
++showing; // Remember we're showing this one
} else {
articule[i].style.display = "none";
}
}
// Grab the length (since `articule` is a live list
const max = articule.length;
// Add blank cells to the end
while (showing < max) {
const filler = document.createElement("td");
filler.className = "filler";
table.appendChild(filler);
++showing;
}
}

实例：

function searchFilter () {
const input = document.getElementById('myInput');
const filter = input.value.toUpperCase();
const table = document.getElementById('tablaPiola');
// Remove any fillers we added last time
table.querySelectorAll(".filler").forEach(filler => {
filler.parentNode.removeChild(filler);
});
const articule = table.getElementsByTagName('td');
// Remember how many are showing at the end
let showing = 0;

for (i = 0; i < articule.length; i++) {
a = articule[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
articule[i].style.display = "";
++showing; // Remember we're showing this one
} else {
articule[i].style.display = "none";
}
}
// Grab the length (since `articule` is a live list
const max = articule.length;
// Add blank cells to the end
while (showing < max) {
const filler = document.createElement("td");
filler.className = "filler";
table.appendChild(filler);
++showing;
}
}
document.getElementById("filter-btn").addEventListener("click", searchFilter);

body {
background-color: black;
}
table
{border-spacing: 20px;
table-layout: fixed;
width: 1200px;
margin: auto;
margin-top: 100px;}
td
{text-align: center;
border-radius: 10px;}
td a
{width: 100%;
display: block;
line-height: 150px;
text-decoration: none;
font-family: "Poppins";
font-weight: 700;
font-size: 17.5px;
color: white;}
.automatizaciones
{background-image: url(imagenes/basico/automatizaciones/articulo.jpg);
background-size: cover;}
.bpm_a_ms
{background-image: url(imagenes/intermedio/bpm_a_ms/articulo.jpg);
background-size: cover;}
.compresion
{background-image: url(imagenes/basico/compresion/articulo.jpg);
background-size: cover;}
.compresion_multibanda
{background-image: url(imagenes/intermedio/compresion_multibanda/articulo.jpg);
background-size: cover;}

<input type="text" id="myInput">
<input type="button" id="filter-btn" value="Apply">
<table class="tabla_basico" id="tablaPiola">
<tr>
<td class="automatizaciones">
<div class="overlay_basico"><a href="/">AUTOMATIZACIONES</a></div>
</td>
<td class="bpm_a_ms">
<div class="overlay_intermedio"><a href="/">BPM A MS</a></div>
</td>
<td class="compresion">
<div class="overlay_basico"><a href="compresion.html">COMPRESIÓN</a></div>
</td>
<td class="compresion_multibanda">
<div class="overlay_intermedio"><a href="/">COMPRESIÓN MULTIBANDA</a></div>
</td>
</tr>
</table>

---

其他一些与主要问题没有直接关系的注释：

• 该代码成为我所称的隐式全局变量的恐怖的牺牲品。您从不声明i、a或txtValue，因此在分配给它们时，最终会创建全局变量。我建议在所有代码中使用严格模式，这样当你尝试这样做时就会出现错误。

• FWIW，我看到您使用的是ES2015+功能(例如const(，所以您可以使用for-of循环而不是for循环。for-of的打字有点少。但在某些平台上，您可能需要polyfill可迭代性。我在这里的回答说明了如何做到这一点。