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>

Думаю, это поможет?

Вернуться на верх