Если вы не хотите использовать Ajax, у вас нет другого выбора иметь все таблицы в вашем коде HTML при загрузке страницы.
Вот что я предлагаю
const tables = [...document.getElementsByClassName('table')];
[...document.getElementsByClassName('buttons')].forEach(button => {
button.addEventListener('click', evt => {
const id = button.id.replace('btn_', '');
tables.forEach(table => {
table.style.display = table.id === id ? 'block' : '';
});
});
});
.table {
display: none;
}
<div class="btn_container">
<div class="buttons" id="btn_products"><i class="fas fa-store"></i>
<h1 class="products_text">Total Products</h1>
</div>
<div class="buttons" id="btn_users"><i class="fas fa-users"></i>
<h1 class="users_text">Total Users</h1>
</div>
<div class="buttons">btn3</div>
</div>
<div class="table_container">
<table class="table" id="products">
<tbody>
<tr>
<th>Table products</th>
</tr>
</tbody>
</table>
<table class="table" id="users">
<tbody>
<tr>
<th>Table users</th>
</tr>
</tbody>
</table>
</div>
Обратите внимание, что если вы хотите, чтобы одна из двух таблиц отображалась при загрузке страницы, измените CSS на
#products /* #users */ {
display: none
}