jQueryを使用して列を非表示および表示

Question

列を表示および非表示にしようとしていますが、コードがその仕事をしていません。

基本的には、クラス名に基づいて列を非表示にすることができます。

列を非表示にして表示する機能が動作しません。

$(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(); 
    // Get the column API object 
    console.log(group); 
    switch (group) { 
     case "DDA": 
      hideColumn("mtg"); 
      hideColumn("sav"); 
      showColumn("dda"); 
      break; 
     case "SAV": 
      hideColumn("mtg"); 
      showColumn("sav"); 
      hideColumn("dda"); 
      break; 
     case "MTG": 
      showColumn("mtg"); 
      hideColumn("sav"); 
      hideColumn("dda"); 
      break; 
    } 
} 

function hideColumn(className){ 

    var columnIndex = $("#dataTable thead tr th."+className).index(); 

    $("#dataTable thead tr th:eq("+columnIndex+")").hide(); 

    $("#dataTable tbody tr").each(function(){ 
     $(this).find("td:eq("+columnIndex+")").hide(); 
    }); 
} 

function showColumn(className){ 

    var columnIndex = $("#dataTable thead tr th."+className).index(); 

    $("#dataTable thead tr th:eq("+columnIndex+")").show(); 

    $("#dataTable tbody tr").each(function(){ 
     $(this).find("td:eq("+columnIndex+")").show(); 
    }); 
} 


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

EDIT：各タイプの1つの列しか隠していないようです。クラス名ですべての列を非表示にしたい

私がここで何が欠けているか教えてもらえますか？

Answer 1

もっと簡単なことがあります。 jsによってDOMに要素を追加すると、$(document).find()でキャッシュするほうがよいので、この場合は常にjsがそれを見つけて要素を取得することはありません。あなたの状況でお勧めされていないスイッチケースを使用する（より良い/他の場合）

注は：/操作するあなたがあなたのコードに追加する逃したこのテーブルにいくつかの要素が追加されますいくつかの機能がありますこのコードはあなたの現在のコードでうまく動作します。 tdのために働いていない場合は、あなたのコードでそれらを追加しなかったと私はどのように見えるか、どのようなクラスを持っているかわからない。
jsfiddle

JS/jQueryの：

$(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(); 
    // Get the column API object 
    console.log(group); 
    if(group == 'dda'){ 
      hideColumn("mtg"); 
      hideColumn("sav"); 
      showColumn("dda"); 
    } else if(group == 'sav'){ 
      hideColumn("mtg"); 
      showColumn("sav"); 
      hideColumn("dda"); 

    } else { 
      showColumn("mtg"); 
      hideColumn("sav"); 
      hideColumn("dda"); 

    } 
} 

function hideColumn(className){ 
    $(document).find("#dataTableHead thead th."+className).hide(); 
} 

function showColumn(className){ 
    $(document).find("#dataTableHead thead th."+className).show(); 

} 


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