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

使用jQuery隐藏和显示列

1 个答案: