JS эквивалент для этого довольно сложно. Особенно, если вы не используете фреймворк.
Пример
const table = document.querySelector("#table");
const checkboxes = Array.from(document.querySelectorAll("input"));
const data = {
mannen: [{
name: 'Noah',
surname: 'Smith'
}, {
name: 'William',
surname: 'Davis'
}],
vrouwen: [{
name: 'Emma',
surname: 'Johnson'
}, {
name: 'Sophia',
surname: 'Wilson'
}]
}
const state = {
mannen: false,
vrouwen: false,
allen: false
}
const createElements = (list) => {
for (let obj of list) {
const row = document.createElement("tr");
for (let value of Object.values(obj)) {
const cell = document.createElement("td");
const textNode = document.createTextNode(value);
cell.appendChild(textNode);
row.appendChild(cell);
}
table.appendChild(row);
}
}
for (let checkbox of checkboxes) {
checkbox.addEventListener("change", (event) => {
const value = event.target.value;
const checked = event.target.checked;
state[value] = checked;
while (table.childElementCount > 1) {
table.removeChild(table.lastChild);
}
if(state.allen) {
createElements([...data.mannen, ...data.vrouwen])
return;
}
for(let [key,] of Object.entries(state).filter(([, enabled]) => enabled)) {
createElements(data[key]);
}
});
}
<form id="form">
<label class="checkbox-inline">Mannen </label> <input name="checkbox" value="mannen" type="checkbox">
<label class="checkbox-inline">Vrouwen</label> <input name="checkbox" value="vrouwen" type="checkbox">
<label class="checkbox-inline">Allen </label> <input name="checkbox" value="allen" type="checkbox">
</form>
<table id="table">
<tr>
<th>Voornaam</th>
<th>Familienaam</th>
<th>Geslacht</th>
<th>Foto</th>
</tr>
</table>
Конечно, это не обрабатывает сопоставление заголовков столбцов со значениями столбцов, инкрементное удаление, добавление записей и, наконец, сортировку по алфавиту.