使用纯 Javascript 的 HTML 表的动态默认过滤器

Posted 2023-03-05

【中文标题】使用纯 Javascript 的 HTML 表的动态默认过滤器

【英文标题】：Dynamic defualt filter for a HTML table with pure Javascript

【发布时间】：2022-01-17 08:44:22

【问题描述】：

我正在管理一个大型 CSV 文件，其中包含显示日期、时间和消息的列。

目前，我已经设法将我的大型 CSV 文件转换为带有一些附加 javascript 代码的 html 表格。我还设法放置了一个过滤器，这样我就可以过滤掉特定的单词、日期和时间。

现在我一直在设置动态默认值。基本上（隐藏的）过滤器应该只显示当前月份和日期的行。这样我就可以回顾 X 年前在这个日期发送的消息。

如前所述，我当前的过滤器是一个输入字段，绝对不是我想要的自动方式

我还没有准备好使用 JavaScript 以外的任何东西。我对 HTML 和 CSS 以外的知识没有那么远

HTML：为简单起见，此处构建了一个表格。 请注意，日期数据标记为 MM/DD/YY。

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="Search for names or countries.." 
  title="Type in a name or a country">

<table>
<tr>
<td> 12/20/19</td>
<td> 01:39  </td>
<td> Rens: Wat </td>
<td> </td>
</tr>
<tr>
<td> 12/20/20</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: In de chat </td>
<td> </td>
</tr>
<tr>
<td> 12/19/21</td>
<td> 01:40  </td>
<td> Rens: Wacht </td>
<td> </td>
</tr>
<tr>
<td> 12/20/21</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: Ga naar je chats </td>
<td> </td>
</tr>
</table>

Javascript：输入过滤器

const myFunction = () => 
  const trs = document.querySelectorAll('Table tr')
  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)

JSfiddle：http://jsfiddle.net/2bxwvqo7/6/

【参考方案1】：

const myFunction = () => 
  const trs = document.querySelectorAll('Table tr')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(td.innerHTML);
  const now = new Date();
  const isRightDate = childrenArr => childrenArr.some(td => 
    const tdDate = new Date(td.innerHTML);
    return tdDate.getDate() === now.getDate()
        && tdDate.getMonth() === now.getMonth();
  );
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ( style, children ) => 
    style.display = isRightDate([...children])
      && isFound([
        ...children // <-- All columns
      ]) ? '' : 'none';
  
  
  trs.forEach(setTrStyleDisplay)

myFunction();

body 
  padding: 20px;


input 
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;


td 
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="Search for names or countries.." 
  title="Type in a name or a country">

<table>
<tr>
<td> 12/13/19</td>
<td> 01:39  </td>
<td> Rens: Wat </td>
<td> </td>
</tr>
<tr>
<td> 12/14/20</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: In de chat </td>
<td> </td>
</tr>
<tr>
<td> 12/13/21</td>
<td> 01:40  </td>
<td> Rens: Wacht </td>
<td> </td>
</tr>
<tr>
<td> 2/13/21</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: Ga naar je chats </td>
<td> </td>
</tr>
</table>