Come posso ottenere la colonna della tabella corrispondente (td) dall'intestazione di una tabella (th)?

Question

Voglio ottenere l'intera colonna dell'intestazione di una tabella.

Ad esempio, desidero selezionare l'intestazione della tabella "Indirizzo" per nascondere la colonna dell'indirizzo e selezionare l'intestazione "Telefono" per mostrare la colonna corrispondente.

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

voglio fare qualcosa di simile http://www.google.com/finance?q=apl (vedere la tabella società collegate) (fare clic sul collegamento "aggiungere o rimuovere colonne")

Answer 1

Il modo più semplice per fare questo sarebbe aggiungere una classe a ogni td che corrisponde alla classe dell'intestazione. Quando fai clic su, controlla la classe, quindi nasconde ogni td con quella classe. Poiché solo le s di quella colonna nascondono quella classe, nasconderebbero effettivamente la colonna.

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

e lo script qualcosa come:

$('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. 
}); 

Qualcosa del genere, in ogni caso. Probabilmente è più prolisso di quanto dovrebbe essere, ma dovrebbe dimostrare il principio.

Un altro modo sarebbe quello di contare semplicemente quante colonne sopra la domanda in questione è, e quindi passare in rassegna ogni riga e nascondere il td che è anche su molte colonne. Ad esempio, se si desidera nascondere la colonna Indirizzo e si tratta della colonna # 3 (indice 2), è possibile scorrere ciclicamente ciascuna riga e nascondere la terza (indice 2).

Buona fortuna ..

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

Qualcosa di simile potrebbe funzionare -

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

Il codice qui sopra nascondere la colonna rilevante se si fa clic sulla intestazione, la logica potrebbe essere cambiato in base alle le tue esigenze però.

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

Answer 4

ecco un violino di lavoro di questo comportamento:

http://jsfiddle.net/tycRW/

ovviamente, nascondere la colonna con il nascondere l'intestazione per esso avrà alcuni risultati strani.

Answer 5

Con un paio di semplici modifiche al codice HTML, farei qualcosa come le seguenti (JS-quadro meno):

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/

Ho aggiunto le caselle di controllo in quanto non ha senso legare il clic alle intestazioni delle colonne in quanto non sarà possibile attivare la visibilità, ma solo nasconderle.

Answer 6

si può fare qualcosa con i CSS, come:

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

Per nascondere una colonna, si aggiunge con Javascript classe corrispondente al tavolo. Qui c2 e c3 sono nascosti.

È possibile aggiungere dinamicamente il file .c1, .c2, ... in un tag di stile o definire un numero massimo.

Answer 7

Simulare il Google Finance mostra/nascondi colonne funzionalità:

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