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

Question

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

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

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

就像提到的那样，我当前的过滤器是一个输入字段，绝对不是我想要的自动方式

我也没有准备好使用 Javascript 以外的任何东西。 我对 HTML 和 CSS 的了解远没有 go

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/

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>