¿Cómo puedo obtener la columna de tabla correspondiente (td) de un encabezado de tabla (th)?

Question

Quiero obtener toda la columna de un encabezado de tabla.

Por ejemplo, deseo seleccionar el encabezado de la tabla "Dirección" para ocultar la columna de dirección, y seleccionar el encabezado "Teléfono" para mostrar la columna correspondiente.

<table> 
<thead> 
    <tr> 
     <th id="name">Name</th> 
     <th id="address">Address</th> 
     <th id="address" class='hidden'>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Freddy</td> 
     <td>Nightmare Street</td> 
     <td class='hidden'>123</td> 
    </tr> 
    <tr> 
     <td>Luis</td> 
     <td>Lost Street</td> 
     <td class='hidden'>3456</td> 
    </tr> 
</tbody> 

quiero hacer algo como http://www.google.com/finance?q=apl (véase la tabla empresas relacionadas) (haga clic en el enlace "añadir o eliminar columnas")

Answer 1

La forma más sencilla de hacerlo sería para agregar una clase a cada td que coincida con la clase del encabezado. Cuando haces clic en, comprueba la clase y luego oculta cada td con esa clase. Como solo la s de esa columna ocultaría esa clase, efectivamente ocultaría la columna.

<table> 
    <thead> 
    <th>Name</th> 
    <th>Address</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="Name">Joe</td> 
     <td class="Address">123 Main St. 
    </tbody> 
</table> 

Y el guión algo como:

$('th').click(function() { 
    var col = $(this).html(); // Get the content of the <th> 
    $('.'+col).hide(); // Hide everything with a class that matches the col value. 
}); 

Algo así, de todos modos. Eso es probablemente más detallado de lo que debe ser, pero debe demostrar el principio.

Otra forma sería simplemente contar cuántas columnas sobre el en cuestión es, y luego recorrer cada fila y ocultar el td que también es el que muchas columnas sobre. Por ejemplo, si desea ocultar la columna Dirección y es la columna n. ° 3 (índice 2), recorrerá cada fila y ocultará la tercera (índice 2).

Buena suerte ..

Answer 2

jQuery('thead td').click(function() { 

    var th_index = jQuery(this).index(); 

    jQuery('#my_table tbody tr').each(
     function(index) { 
      jQuery(this).children('td:eq(' + th_index + ');').each(
       function(index) { 
        // do stuff here 
       } 
      ); 
     } 
    ); 
}); 

Answer 3

Algo como esto funcionaría -

$('th').click(function() { 
    var index = $(this).index()+1; 
    $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide() 
}); 

El código anterior ocultar la columna relevante si se hace clic en el encabezado, la lógica podría ser cambiado para adaptarse sus requisitos sin embargo.

Demo - http://jsfiddle.net/LUDWQ/

Answer 4

aquí es un violín de trabajo de este comportamiento:

http://jsfiddle.net/tycRW/

por supuesto, ocultando la columna con el encabezado cabo ocultando para ello tendrá algunos resultados extraños.

Answer 5

Con un par de modificaciones simples en su HTML, me gustaría hacer algo como lo siguiente (JS-marco menos):

HTML:

<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input> 
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input> 
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input> 

<table id="tbl"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Phone</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Freddy</td> 
     <td>Nightmare Street</td> 
     <td>123</td> 
    </tr> 
    <tr> 
     <td>Luis</td> 
     <td>Lost Street</td> 
     <td>3456</td> 
    </tr> 
</tbody> 

Javascript:

var cb = document.getElementsByClassName("chk"); 
var cbsz = cb.length; 

for(var n = 0; n < cbsz ; ++n) { 
    cb[n].onclick = function(e) { 
     var idx = e.target.getAttribute("data-index"); 
     toggleColumn(idx); 
    } 
} 

function toggleColumn(idx) { 
    var tbl = document.getElementById("tbl"); 
    var rows = tbl.getElementsByTagName("tr"); 
    var sz = rows.length; 

    for(var n = 0; n < sz; ++n) { 
     var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx]; 
     el.style.display = el.style.display === "none" ? "table-cell" : "none"; 
    } 
} 

http://jsfiddle.net/dbrecht/YqUNz/1/

Agregué las casillas de verificación ya que no tiene sentido vincular el clic a los encabezados de las columnas ya que no podrá alternar la visibilidad, solo ocultarlas.

Answer 6

se puede hacer algo con CSS, como:

<html> 
<head> 
    <style> 
     .c1 .c1, .c2 .c2, .c3 .c3{ 
      display:none; 
     } 
    </style> 
</head> 
<body> 
<table class="c2 c3"> 
    <thead> 
     <tr> 
      <th id="name" class="c1">Name</th> 
      <th id="address" class="c2">Address</th> 
      <th id="phone" class="c3">Phone</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="c1">Freddy</td> 
      <td class="c2">Nightmare Street</td> 
      <td class="c3">123</td> 
     </tr> 
     <tr> 
      <td class="c1">Luis</td> 
      <td class="c2">Lost Street</td> 
      <td class="c3">3456</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 

Para ocultar una columna, se agrega con Javascript la clase correspondiente a la tabla. Aquí c2 y c3 están ocultos.

Puede agregar dinámicamente el .c1, .c2, ... en una etiqueta de estilo, o definir un número máximo.

Answer 7

Simulando el Google Finanzas mostrar/ocultar las columnas funcionalidad:

http://jsfiddle.net/b9chris/HvA4s/

$('#edit').click(function() { 
    var headers = $('#table th').map(function() { 
     var th = $(this); 
     return { 
      text: th.text(), 
      shown: th.css('display') != 'none' 
     }; 
    }); 

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>']; 
    $.each(headers, function() { 
     h.push('<th><input type=checkbox', 
       (this.shown ? ' checked ' : ' '), 
       '/> ', 
       this.text, 
       '</th>'); 
    }); 
    h.push('</tr></thead></table></div>'); 
    $('body').append(h.join('')); 

    $('#done').click(function() { 
     var showHeaders = $('#tableEditor input').map(function() { return this.checked; }); 
     $.each(showHeaders, function(i, show) { 
      var cssIndex = i + 1; 
      var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')'); 
      if (show) 
       tags.show(); 
      else 
       tags.hide(); 
     }); 

     $('#tableEditor').remove(); 
     return false; 
    }); 

    return false; 
});