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

編輯：似乎我只隱藏每種類型的一列。 我想用類名隱藏所有列。

有人可以告訴我我在這里想念的嗎？

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