I am managing a large CSV file with columns that show the date, time and message.
Currently I have managed to convert my large CSV file into a HTML table with some additional Javascript code. I have also managed to put in a filter so I can filter out specific words, dates and times.
Now I am currently stuck with setting a dynamic default value. Basically the (hidden) filter should only display rows with the current Month and Day. This way I can look back at messages that were send X years ago on this date.
Like mentioned my current filter is an input field and definitly not the automatic way like I want to
I am also not ready to use anything other than Javascript. My knowledge beyond HTML and CSS doesnt go that far
HTML: for simplicity a table is structured here. Note that the date-data is marked as 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: input filter
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/
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>