是否有可能实现两个不同大小的表，其中只有一个将根据用户的选择显示在页面上?
。用户选择的数据表有以下列:国家、价格、日期，因此将显示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 display : </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>我想这个可以了。