JQuery: исключить первый и второй столбцы, которые являются видимыми - PullRequest
Новая
       7

JQuery: исключить первый и второй столбцы, которые являются видимыми

0 голосов
/ 02 февраля 2019

У меня есть простая задача (так я думал), где мне нужно выбрать все столбцы ИСКЛЮЧИТЬ все НЕВИДИМ столбцы и 1-й и 2-й VISIBLE столбцы, использующие jQuery, но это кажется намного сложнее, чем я думал.

Посмотрите на образец ниже 

<table>
    <thead>
        <tr>
            <th>Header1</th> <!--This column is hidden-->
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column1</td> <!--This column is hidden-->
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
            <td>Column5</td>
        </tr>
    </thead>

Как видите, заголовок № 1 и столбец № 1скрыто.

И я делаю следующее, чтобы выбрать с помощью jQuery, он выберет столбцы № 3, № 4 и № 5.Я хочу выбрать столбцы № 4 и № 5. 

//Attempt #1
var $ths = $tbl.find('thead > tr > th:not(:hidden, :nth-child(1), :nth-child(2))');
var $tds = $tbl.find('tbody > tr > td:not(:hidden, :nth-child(1), :nth-child(2))');

//Attempt #2
var $ths = $tbl.find('thead > tr > th:not(:hidden):not(:nth-child(1), :nth-child(2))');
var $tds = $tbl.find('tbody > tr > td:not(:hidden):not(:nth-child(1), :nth-child(2))');

Быстрый обходной путь для меня - ВЫБЕРИТЕ все видимые столбцы, а затем исключите первые 2 столбца в новый массив.Мне нужно сделать так, потому что скрытый столбец может быть посередине (пользователю разрешено скрывать / показывать столбцы - например. Столбец № 1 и Столбец № 3 являются скрытыми столбцами,следовательно, выбор должен возвращать ТОЛЬКО столбец № 5 , поскольку столбец № 2 и столбец № 4 становятся 1-м и 2-м столбцами).

Это мой обходной путь 

var $ths = $tbl.find('thead > tr > th:not(:hidden)').slice(2);
var $tds = $tbl.find('tbody > tr > td:not(:hidden)').slice(2);

Есть идеи, как это сделать на простом селекторе jQuery?

Спасибо ...

1 Ответ

0 голосов
/ 02 февраля 2019

Попробуйте это:

:visible:lt(2) соответствует первым 2 видимым столбцам, поэтому размещение их внутри :not исключает их. 

var $ths = $("thead > tr > th:not(:visible:lt(2))");
var $tds = $("tbody > tr > td:not(:visible:lt(2))");

console.log($ths.map((i, el) => el.innerHTML).get(), $tds.map((i, el) => el.innerHTML).get());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th style="display: none">Header1</th><!--This column is hidden-->
      <th>Header2</th>
      <th>Header3</th>
      <th>Header4</th>
      <th>Header5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display: none">Column1</td><!--This column is hidden-->
      <td>Column2</td>
      <td>Column3</td>
      <td>Column4</td>
      <td>Column5</td>
    </tr>
    <tr>
      <td style="display: none">Column1</td><!--This column is hidden-->
      <td>Row 2 Column2</td>
      <td>Row 2 Column3</td>
      <td>Row 2 Column4</td>
      <td>Row 2 Column5</td>
    </tr>
    </thead>
</table>
...