Скрыть Colspan динамически

У меня есть следующий код, который динамически скрывает столбцы. Проблема в том, что я пытаюсь добавить colspan для первого столбца, который содержит 2 столбца. Если я прячу первый, то скрывается только первый внутри, а не второй, пренебрегая моей доской. Кто-нибудь может мне помочь, пожалуйста? спасибо.

   $(document).on("click", "[data-column]", function () {
      var button = $(this),
          header = $(button.data("column")),
          table = header.closest("table"),
          index = header.index() + 1, // convert to CSS's 1-based indexing
          selector = "tbody tr td:nth-child(" + index + ")",
          column = table.find(selector).add(header);

      column.toggleClass("hidden");
    });
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
   <tr>
    <th id="column-a" colspan="2">Step 1</th>
    <th id="column-b"  colspan="1">Step 2</th>
    <th id="column-c"  colspan="1">Step 3</th>
    </tr>  
  </thead>
  <tbody>
    <tr>
      <td>Of step 1</td>
      <td>Of step 1</td>
      <td>Of step 2</td>
      <td>Of step 3</td>
    </tr>
    <tr>
      <td>Of step 1</td>
      <td>Of step 1</td>
      <td>Of step 2</td>
      <td>Of step 3</td>

    </tr>
  </tbody>
</table>

<button type="button" data-column="#column-a">Hide/show 1st</button>
<button type="button" data-column="#column-b">Hide/show 3rd</button>
<button type="button" data-column="#column-c">Hide/show last</button>
1
задан 12.01.2017, 01:31
0 ответов

То, что ты мог бы делать, так это следующее:

  • Складывать общее количество colspan до th чтобы скрывать / показывать.
  • th чтобы скрывать / показывать, он показывает нам количество колонн, которые я группирую (eg: colspan)
  • С этими 2 данными мы можем знать, начиная с которого td и нужно скрывать / показывать всех тех.

Пример:

$(document).on("click", "[data-column]", function () {
  var button = $(this),
      header = $(button.data("column")),
      tr = header.closest("tr"),
      table = header.closest("table"),
      index = header.index(),
      prevColspans = 0,
      colspan = parseInt(header.attr('colspan'), 10),
      selectors = [];
   
   // Obtenemos el total de columnas anteriores al header acutal
   for (var i = 0; i < index; i++) {
     prevColspans += parseInt(tr.children().eq(i).attr('colspan'), 10);
   }
   
   // Por cada col agrupada
   for (i = 0; i < colspan; i++) {
      selectors.push("tbody tr td:nth-child(" + (i + prevColspans + 1) + ")");
    }
    table.find(selectors.join(',')).add(header).toggleClass("hidden");
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
   <tr>
    <th id="column-a" colspan="2">Step 1</th>
    <th id="column-b" colspan="1">Step 2</th>
    <th id="column-c" colspan="1">Step 3</th>
    </tr>  
  </thead>
  <tbody>
    <tr>
      <td>Of step 1</td>
      <td>Of step 1</td>
      <td>Of step 2</td>
      <td>Of step 3</td>
    </tr>
    <tr>
      <td>Of step 1</td>
      <td>Of step 1</td>
      <td>Of step 2</td>
      <td>Of step 3</td>
    </tr>
  </tbody>
</table>

<button type="button" data-column="#column-a">Hide/show 1st</button>
<button type="button" data-column="#column-b">Hide/show 3rd</button>
<button type="button" data-column="#column-c">Hide/show last</button>
2
ответ дан 03.12.2019, 17:44