1

Tengo el siguiente código, el cuál oculta columnas de manera dinamica. El problema es que estoy tratando de agregar un colspan para la primera columna, misma que contiene 2 columnas. Si oculto la primera, solo se oculta la primera que esta dentro de ella y no la segunda en conjunto, descuadrando mi tabla.. ¿Alguien me puede echar una mano por favor? gracias.

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

2

Lo que podrías hacer seria lo siguiente:

  • Sumar el total de colspan hasta el th a ocultar/mostrar.
  • El th a ocultar/mostrar, nos indica la cantidad de columnas que agrupo (eg: colspan)
  • Con esos 2 datos podemos saber a partir de que td y cuantos hay que ocultar/mostrar.

Ejemplo:

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

1
  • Muchisimas gracias, esto es lo que necesitaba. Saludos! Commented el 12 ene. 2017 a las 18:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.