我正在尝试显示和隐藏列，但我的代码没有完成它的工作。
基本上我希望能够根据类名隐藏和显示列。
我隐藏和显示列的功能不起作用。
$(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);
}
编辑：似乎我只隐藏了每种类型的一列。我想隐藏所有带有类名的列。
有人可以告诉我我在这里缺少什么吗？
它可能比这更简单。您通过 js 将一个元素添加到 DOM 中，因此最好通过缓存它，$(document).find()因此在这种情况下，您始终可以确定 js 会找到它并且永远不会得到元素不存在错误。您使用在您的情况下不推荐的开关盒（如果/否则更好）
注意：有一些函数可以操作/添加一些元素到这个表中，你错过了为我们添加到你的代码中，所以这个代码可以很好地与你当前的代码一起使用。如果它不起作用td，因为你没有在你的代码中添加它们，我不知道它们是什么样子或它们有什么类。
提琴手
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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句