HTML: показывать на одной странице таблицы разного размера в зависимости от выбора пользователя
Возможно ли реализовать две таблицы разного размера, из которых только одна будет отображаться на странице в зависимости от выбора пользователя?
Например: пользователь выбирает таблицу данных, которая имеет следующие столбцы: страна, цена, дата, поэтому отображаются 3 столбца. Затем пользователь выбирает таблицу users со столбцами: name, email, так что теперь будет отображаться 2 столбца.
const inputs = document.querySelectorAll("input")
const country = document.querySelectorAll('td.country')
inputs.forEach(e=>e.onchange=({target:{checked,name}})=>{
document.querySelectorAll(`td.${name}`).forEach(e=>e.style.display=checked?"table-cell":"none")
})
table{
border-collapse: collapse;
}
td {
padding: 8px;
border: 1px solid #777;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table</title>
</head>
<body>
<table>
<thead>
<tr>
<td class="country">country</td>
<td class="price">price</td>
<td class="date">date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="country">USA</td>
<td class="price">234</td>
<td class="date">3-9-2022</td>
</tr>
<tr>
<td class="country">fr</td>
<td class="price">234</td>
<td class="date">3-9-2022</td>
</tr>
<tr>
<td class="country">dz</td>
<td class="price">234</td>
<td class="date">3-9-2022</td>
</tr>
</tbody>
</table>
<div>
<h5>what to dispaly : </h5>
<div><label >show country : <input checked type="checkbox" name="country" id="country"></label></div>
<div><label >show price : <input checked type="checkbox" name="price" id="price"></label></div>
<div><label >show date : <input checked type="checkbox" name="date" id="date"></label></div>
</div>
</body>
</html>
Думаю, это поможет?