Question

我有一个动态创建的表，我想根据组隐藏列。

但到目前为止，我所能做的只是隐藏tableHeaders。我可以隐藏标题，但数据输入仍然存在http://prntscr.com/hl5so6

我的问题是：

如何使用类name = "DDA"隐藏整个列。

所以不是这样：$('.dda').hide();我需要这样的内容：$('.dda').hideColumn();和$('.dda').show();到$('.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

好吧，你总是可以动态添加这些类。在我的解决方案中，我已经将类声明为数组，在TH中我传递了valies，然后在生成td的迭代中添加了这个（为了样式目的而稍微改变了）类。

然后你可以简单地在它上面隐藏。

所以主要的变化是：

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

然后

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

然后

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>'
        }

然后我添加了一个虚拟按钮：

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

我还改变了生成THEAD，因为你没有提供任何来源，我相信所有标签都应该在正确的列上，所以也要看看它......

这是一个解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用Jquery隐藏列

1 个答案: