let table;
const show = (data) => {
table.innerHTML = data
.map(({id,name,email, gender,status}) => `<tr>
<td> ${name}</td>
<td> <button class="more" data-id="${id}">View More</button></td>
<td hidden id="email">${email}</td>
<td hidden id="gender">${gender}</td>
<td hidden id="status">${status}</td>
</tr>`)
.join("");
};
const load = () => {
fetch("url")
.then(result => result.json())
.then(show);
};
window.addEventListener("DOMContentLoaded", () => {
table = document.getElementById('table');
table.addEventListener("click", (e) => {
const tgt = e.target.closest("button");
if (!tgt) return;
tgt.closest("tr").querySelectorAll("td").forEach(td => td.hidden = false);
})
load();
});
I want the output to be loaded on a new page. Email gender status are hidden but if we click on button, we can see them. I want that when we click on button we see data on a new page.