Question

我有一个简单的任务（所以我认为），我需要选择所有列除所有 不可见 列以及第1和2nd使用jQuery的 VISIBLE 列，但似乎比我想象的要难得多。

查看下面的示例

<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))');

对我来说，快速的解决方法是选择所有VISIBLE列，然后将前2列排除到新数组中。我需要这样做，因为隐藏列可以位于中间（允许用户隐藏/显示列-例如，列＃1 和列＃3 已隐藏因此，选择项只能返回第5列，因为第2列和第4列成为第一和第二列）。 / p>

这是我的解决方法

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

关于在简单的jQuery选择器上执行此操作的任何想法吗？

谢谢...

Answer 1

尝试一下：

: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>

jQuery：排除可见的第一和第二列

1 个答案: