Как удалить лишние столбцы в 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 remove = {
  from: 5,
  exclude: [ 9, 10, 11 ],
};

$('table tr').each(function() {
  $(this)
    .children()
    .filter(i => i >= remove.from && !remove.exclude.includes(i))
    .remove();
});

Comments

[pofeg]

суппер!
Но небольшая проблема:
Если вы указали кол-во отображаемых - 5
То он отображает 4 из них, а пятую не показывает

[pofeg]

Упс! Решил сам, просто дописал 5 + 1 и все норм)))
Спасибо!