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>

This is my webpage

This is how it filters

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>

其他一些与主要问题没有直接关系的笔记

该代码属于我所谓的The Horror of Implicit Globals。您永远不会声明i，a或txtValue，因此最终在分配给全局变量时会创建它们。我建议在所有代码中使用strict mode，以便在尝试执行此操作时出现错误。
FWIW，我看到您正在使用ES2015 +功能（例如const），因此您可以使用for-of循环而不是for循环。 for-of少打字。但是您可能需要在某些平台上进行polyfill迭代。我的答案here显示了如何做到这一点。

按元素名称过滤表

1 个答案: