Как удалить лишние столбцы в table с помощью jquery?

Question

[pofeg]

Есть простая таблица HTML:

<table class="table table-sm table-borderless account-calculator__table project-calculator__table">
                <thead>
                  <tr>
                    <th scope="col">Показатель</th>
                    <th scope="col">1 год</th>
                    <th scope="col">2 год</th>
                    <th scope="col">3 год</th>
                    <th scope="col">4 год</th>
                    <th scope="col">5 год</th>
                    <th scope="col">6 год</th>
                    <th scope="col">7 год</th>
                    <th scope="col">8 год</th>
                    <th scope="col">9 год</th>
                    <th scope="col">10 год</th>
                    <th scope="col">Итого за  <br>10 лет</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td scope="row">Процентный доход с инвестиций, % годовых</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                    <td>[xfvalue_dohod]%</td>
                  </tr>
                  <tr>
                    <td scope="row">Планируемый годовой инвестиционный доход, руб.</td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                    <td class="gdh"></td>
                  </tr>
                  <tr>
                    <td scope="row">Планируемый среднемесячный доход от инвестиций, руб.</td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                    <td class="mdh"></td>
                  </tr>
                </tbody>
              </table>

В ней до 11 столбцов, выглядит она так:


Как оставить только нужное кол-во столбцов а те что идут дальше, удалить или скрыть?
К примеру я указываю цифру 7, и отображаются только семь столбцов а 8,9,10 удаляются(кроме 11, он всегда должен быть)
Заранее спасибо за внимание!

Answer 1

[0xD34F]

Где и кого надо удалить:

const tableSelector = 'здесь селектор вашей таблицы';
const columnIndices = [ 8, 9, 10 ];

const $rows = $(`${tableSelector} tr`);
// или
const { rows } = document.querySelector(tableSelector);

Удаляем:

$rows.each((_, n) =>
  $('> *', n)
    .filter(i => ~columnIndices.indexOf(i))
    .remove()
);

или

$rows
  .children(`${columnIndices.map(n => `:nth-child(${-~n})`)}`)
  .detach();

или

Array.prototype.forEach.call(rows, function(n) {
  for (let i = n.cells.length; i--; this.has(i) && n.deleteCell(i)) ;
}, new Set(columnIndices));

или

for (const { cells } of rows) {
  columnIndices.map(n => cells[n]).forEach(n => n?.remove());
}

или

for (const n of rows) {
  n.replaceChildren(...Array.prototype.filter.call(
    n.cells,
    (_, i) => !columnIndices.includes(i)
  ));
}