html colspan Problem beim Ausblenden von Spalten

Question

Ich habe eine Tabelle Tabelle, die zwei 2 Sätze von Headern, Hauptheader, die jeweils 5 Unterheader haben. Das Ziel besteht darin, nur 3 Spalten anzuzeigen und es dem Benutzer richtig zu erlauben, basierend auf den Hauptheadern zu sortieren.

Von diesen fünf Unterüberschriften sind die Spalten 4 und 5 immer sichtbar, aber für die ersten 3 Spalten möchte ich nur eine anzeigen, die der Benutzer auswählt, und die anderen beiden ausblenden. Utlately Kopf Hauptheader wird nur 3 Spalten zeigen.

Wenn der Benutzer auswählt, welche der Daten angezeigt werden sollen, treten Probleme mit den Spaltenüberschriften auf.

Wenn stelle ich die wichtigsten Header 5 dann Spalten aus dem nächsten Satz-Überlauf in den ersten Satz colspan, da ein falsches Aussehen

Wenn ich die großen Header gesetzt colspan bis 3, sichtbar sieht es perfekt, aber wenn Ich versuche, basierend auf Hauptheadern zu sortieren, Unterheader werden nicht an ihre Hauptheader angepasst und die Sortierung ist deaktiviert.

hier ist eine Geige http://fiddle.jshell.net/hed56hsd/1/

Was mir fehlt? und was wäre eine gültige Problemumgehung

Answer 1

Da nur drei Spalten von jedem Satz sichtbar sein wird, wäre die einfachste Lösung, die colspan auf der Hauptkopfzeile auf 3 festzulegen. Das ist es.

<th colspan='3' class="set1">Set 1</th> 
<th colspan='3' class="set2">Set 2</th> 
<th colspan='3' class="set3">Set 3</th> 

Bei der Initialisierung können Sie den Datenwähler gelten durch .change() am Ende der Veranstaltung Zuhörer Zugabe - demo.

$('table').tablesorter({ 
    theme: 'blue' 
}); 

$(".selector").on("change", function() { 
    var selectedData = this.value; 
    $(".type1").addClass("hide"); 
    $('.' + selectedData).removeClass("hide"); 
}).change(); 

Wenn es mehr kompliziert, dass als ich Ihnen die columnSelector widget ausprobieren empfohlen hätte, die automatisch die colspan modifiziert aus vermasselt das Tabellenformat zu halten.