Hide colspan dynamically

Question

Hide colspan dynamically

Navigation

#1 by (2 votes)

0

I have the following code, which hides columns dynamically. The problem is that I am trying to add a colspan for the first column, which contains 2 columns. If I hide the first one, only the first one that is inside it and not the second one is hidden, unraveling my table .. Can someone help me out please? thanks.

   $(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>

jquery html

asked by user3680708 12.01.2017 в 00:31

source

1 answer

Create an own User Model and authenticate the entry Problems with PHP array

score 2 · Accepted Answer

What you could do would be the following:

Add the total of colspan to th to hide / show .
The th to hide / show , tells us the number of columns that we group (eg: colspan )
With those 2 data we can know from what td and how many there are to hide / show .

Example:

$(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>