Ausblenden einer Spalte mit Jquery

Question

Ich habe eine Tabelle dynamisch erstellt und ich möchte Spalten basierend auf Gruppe ausblenden.

Aber bisher konnte ich nur die tableHeaders verstecken. Und ich kann den Header aber die Eingabe von Daten verstecken noch da http://prntscr.com/hl5so6

Meine Frage ist:

Wie kann ich die gesamte Spalte mit Klasse name = "DDA" zum Beispiel verstecken.

Anstatt also diese: $('.dda').hide(); Ich möchte so etwas wie: $('.dda').hideColumn(); und $('.dda').show(); zu $('.dda').showColumns();

$(document).ready(function() { 
    appendHeader(); 
    select(); 
    var amountOfDayEnds = parseInt($('#amountOfDayEnds').val()); 
    appendBody(amountOfDayEnds); 


}); 

$('#group').change(function() { 
    select(); 
}); 

//Change Header based on the select 
function select() { 
    var group = $('#group').val(); 
    var table = $('#dataTable'); 
    console.log(group); 
    switch (group) { 
     case "DDA": 
      $('.mtg').hide(); 
      $('.sav').hide(); 
      $('.dda').show(); 
      break; 
     case "SAV": 
      $('.mtg').hide(); 
      $('.sav').show(); 
      $('.dda').hide(); 
      break; 
     case "MTG": 
      $('.mtg').show(); 
      $('.sav').hide(); 
      $('.dda').hide(); 
      break; 
    } 
} 

//Append Header 
function appendHeader() { 
    var thead = '<thead>'; 
    thead += "<tr class='text-primary text-center'>"; 
    thead += '<th>Day</th>'; 
    thead += '<th class="dda">Type 400</th>'; 
    thead += '<th class="dda">Type 4044</th>'; 
    thead += '<th class="dda">Type 4045</th>'; 
    thead += '<th class="sav">Type 300</th>'; 
    thead += '<th class="sav">Type 310</th>'; 
    thead += '<th class="mtg">Type 700</th>'; 
    thead += '<th class="mtg">Type 710</th>'; 
    thead += '</tr>'; 
    thead += '</thead>'; 

    $('#dataTableHead').append(thead); 
} 
function appendBody(amountOfDayEnds) { 
    var data = ""; 
    console.log(amountOfDayEnds); 
    for(var i=1;i<=amountOfDayEnds;i++) { 
     data += '<tr align="center" class="hover-table">'; 
     data += '<td>' + i + '</td>'; 
     for (var j = 0; j< 8;j++) { 
      data += '<td>' + '<input class="text-center config-input amountOfAccounts" type="number" value="0" min="0" max="500" name="dataAccounts[]" data-error="Please, insert a value" required></td>' 
     } 
     data += '</tr>'; 
    } 
    $('#dataTableBody').append(data); 
} 

Answer 1

Nun, können Sie immer dynamicaly diese Klassen hinzufügen. In meiner Lösung habe ich Klassen in Array deklariert, in TH übergebe ich die Valies und füge dann diese (etwas für Stylingzwecke veränderte) Klasse in Iteration hinzu, wo td erzeugt wird.

dann können Sie einfach ein Versteck darauf aufrufen.

so die wichtigsten Änderungen sind:

var classes = ["dda","dda","dda","sav","sav","mtg","mtg"]; 

dann

thead += '<th class="'+classes[0]+'">(dda)Type 400</th>'; 

und dann

for (var j = 0; j< 7;j++) { 
      data += '<td class="'+classes[j]+'td">' + '<input class="text-center config-input amountOfAccounts" type="number" value="0" min="0" max="500" name="dataAccounts[]" data-error="Please, insert a value" required></td>' 
     } 

und dann habe ich eine Dummy-Taste hinzugefügt:

<button onclick="$('.dda').hide(); $('.ddatd').hide();">HIDE DDA</button> 

Ich habe auch Erzeugungs THEAD verändert, wie Sie jede Quelle zur Verfügung gestellt haben, und ich glaube, dass alle Etiketten über richtige Spalte sein sollte, so ist auch sie betrachten ...

heres eine Lösung:

$(document).ready(function() { 
 
    appendHeader(); 
 
    //select(); 
 
    var amountOfDayEnds = 3; 
 
    appendBody(amountOfDayEnds); 
 

 

 
}); 
 

 
$('#group').change(function() { 
 
    select(); 
 
}); 
 

 
//Change Header based on the select 
 
function select() { 
 
    var group = $('#group').val(); 
 
    var table = $('#dataTable'); 
 
    console.log(group); 
 
    switch (group) { 
 
     case "DDA": 
 
      $('.mtg').hide(); 
 
      $('.sav').hide(); 
 
      $('.dda').show(); 
 
      break; 
 
     case "SAV": 
 
      $('.mtg').hide(); 
 
      $('.sav').show(); 
 
      $('.dda').hide(); 
 
      break; 
 
     case "MTG": 
 
      $('.mtg').show(); 
 
      $('.sav').hide(); 
 
      $('.dda').hide(); 
 
      break; 
 
    } 
 
} 
 

 

 
var classes = ["dda","dda","dda","sav","sav","mtg","mtg"]; 
 
//Append Header 
 
function appendHeader() { 
 
    var thead = ''; 
 
    thead += "<tr class='text-primary text-center'>"; 
 
    thead += '<th>Day</th>'; 
 
    thead += '<th class="'+classes[0]+'">(dda)Type 400</th>'; 
 
    thead += '<th class="'+classes[1]+'">(dda)Type 4044</th>'; 
 
    thead += '<th class="'+classes[2]+'">(dda)Type 4045</th>'; 
 
    thead += '<th class="'+classes[3]+'">(sav)Type 300</th>'; 
 
    thead += '<th class="'+classes[4]+'">(sav)Type 310</th>'; 
 
    thead += '<th class="'+classes[5]+'">(mtg)Type 700</th>'; 
 
    thead += '<th class="'+classes[6]+'">(mtg)Type 710</th>'; 
 
    thead += '</tr>'; 
 
    thead += ''; 
 

 
    $('#dataTableHead').append(thead); 
 
} 
 
function appendBody(amountOfDayEnds) { 
 
    var data = ""; 
 
    console.log(amountOfDayEnds); 
 
    for(var i=1;i<=amountOfDayEnds;i++) { 
 
     data += '<tr align="center" class="hover-table">'; 
 
     data += '<td>' + i + '</td>'; 
 
     for (var j = 0; j< 7;j++) { 
 
      data += '<td class="'+classes[j]+'td">' + '<input class="text-center config-input amountOfAccounts" type="number" value="0" min="0" max="500" name="dataAccounts[]" data-error="Please, insert a value" required></td>' 
 
     } 
 
     data += '</tr>'; 
 
    } 
 
    $('#dataTableBody').append(data); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="$('.dda').hide(); $('.ddatd').hide();">HIDE DDA</button> 
 
<table id="dataTable"><thead id="dataTableHead"></thead><tbody id="dataTableBody"></tbody></table>