具有纯 Javascript 的 HTML table 的动态默认过滤器

Question

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

目前，我已经成功地将我的大型 CSV 文件转换为 HTML table 以及一些额外的 Javascript 代码。我还设法安装了一个过滤器，这样我就可以过滤掉特定的单词、日期和时间。

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

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

我也不准备使用 Javascript 以外的任何东西。除了 HTML 和 CSS，我的知识还不够

HTML：为了简单起见，这里构造了一个table。请注意，日期数据标记为 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/

Answer 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>

具有纯 Javascript 的 HTML table 的动态默认过滤器

Dynamic defualt filter for a HTML table with pure Javascript

html

javascript

html-table

filter