gpt4 book ai didi

javascript - 如何隐藏 HTML 表格行

转载 作者:行者123 更新时间:2023-12-02 23:44:50 25 4
gpt4 key购买 nike

我正在尝试使用 jQuery/JavaScript 隐藏 HTML 表格行,我的 HTML 表格正在使用 JSON 数据呈现

当用户选择多个下拉列表并单击“开始”时,我想隐藏某些行

  • 在我的 table 里,我有几个 salesTypeCash , Creditcard , Swiggy , Zomato还有更多
  • 我的下拉菜单也包含这些值
  • 我正在尝试执行用户选择的选项,点击“go”后,这些行应该被填充,其他行应该隐藏

我的代码

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
var sList = "";
$('input[type=checkbox]').each(function() {
if (this.checked) {
sList += $(this).val() + ","
}
});

$("#To").val(sList.slice(0, -1));
});
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
var cpy = [{
"Billdate": "2018-08-04",
"Outlet": "JAYANAGAR",
"Total": 518212,
"Cash": 508161,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "10051",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-04",
"Outlet": "MALLESHWARAM",
"Total": 104801,
"Cash": 102675,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "2126",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-04",
"Outlet": "KOLAR",
"Total": 138151,
"Cash": 138151,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "JAYANAGAR",
"Total": 628358,
"Cash": 608336,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "20022",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "MALLESHWARAM",
"Total": 115113,
"Cash": 108903,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "6210",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "KOLAR",
"Total": 134107,
"Cash": 134107,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-06",
"Outlet": "JAYANAGAR",
"Total": 177866,
"Cash": 177866,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-06",
"Outlet": "KOLAR",
"Total": 66095,
"Cash": 66095,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "JAYANAGAR",
"Total": 283124,
"Cash": 277098,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "6026",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "MALLESHWARAM",
"Total": 58789,
"Cash": 58214,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "575",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "KOLAR",
"Total": 67886,
"Cash": 67886,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}]

function getDataList(jsn) {
var Billdate = [];
var Outlet = [];
var SalesType = [];
Billdate = [...new Set(jsn.map(ele => ele.Billdate))];
Outlet = [...new Set(jsn.map(ele => ele.Outlet))];
for (let i in jsn[0]) {
if (i !== 'Billdate' && i !== 'Outlet') {
SalesType.push(i)
}
}

return {
Billdate,
Outlet,
SalesType
}

}

function structureJSON(obj) {
var arr = [];
obj.Billdate.forEach((ele1, index1) => {
obj.SalesType.forEach((ele, index) => {
let row;
if (index === 0) {
row = {
Billdate: ele1,
SalesType: ele
};
} else {
row = {
Billdate: "",
SalesType: ele
};
}
obj.Outlet.forEach((ele2, index2) => {
var selected = cpy.filter((ele3, index3) => {
return ele3.Billdate === ele1 && ele3.Outlet == ele2
});
if (selected.length != 0)
row[ele2] = selected[0][ele]
else
row[ele2] = "0";
})
arr.push(row)
})

})

return arr;

}

var tableValue = structureJSON(getDataList(cpy))
addTable(tableValue)

function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table table-striped table-bordered table-hover"
}),
$thd = $("<thead/>"),
$tb = $("<tbody/>"),
$trh = $("<tr/>", {
"class": "text-center"
});

$.each(Object.keys(tableValue[0]), function(_, val) {
$("<th/>").html(val).appendTo($trh);
});
$trh.appendTo($thd);
$.each(tableValue, function(_, item) {
$tr = $("<tr/>", {
"class": "filterData"
});
console.log(item.SalesType) // this one is sales type
$.each(item, function(key, value) {
if (isNaN(value)) {
$("<td/>", {
"class": "text-left"
}).html(value).appendTo($tr);
} else {
$("<td/>", {
"class": "text-right"
}).html(value.toLocaleString('en-in')).appendTo($tr);
}

$tr.appendTo($tb);
if (item.Billdate != "") {
$tr.css("background-color", "#DFADF4");

}

});
});
$tbl.append($thd).append($tb);
$("#salesBreakupTable").html($tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<label for="subCategoryCode">Filter Data :</label>
<div class="input-group" id="hideFilter">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li><label> <input type="checkbox" value="Cash"> Cash </label></li>
<li><label> <input type="checkbox" value="Creditcard"> Creditcard </label></li>
<li><label> <input type="checkbox" value="Coupon"> Coupon </label></li>
<li><label> <input type="checkbox" value="Credit"> Credit </label></li>
<li><label> <input type="checkbox" value="Swiggy"> Swiggy </label></li>
<li><label> <input type="checkbox" value="uber Eats"> uber Eats </label></li>
<li><label> <input type="checkbox" value="Zomato"> Zomato </label></li>
</ul>
</div>
<button type="button" class="commonButton" id="save">
<i class="fa fa-search"></i>&nbsp;Go
</button>
</div>
<div align="Center" class="table table-responsive" id="commonDvScroll">
<table id="salesBreakupTable"></table>
</div>

要将表格导出到 Excel,我使用此代码

$("#export").click(function() {
var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');

copyTable.insertAfter($("#dailySales"))
copyTable.find('display:none').remove()

copyTable.table2excel({
filename: "Daily Sales Report.xls"
});
copyTable.remove()

});

我正在使用这个插件从 jQuery 生成 Excel: <script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

但它导出带有隐藏行的完整表。

最佳答案

试试这个:

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
var sList = "";
$('input[type=checkbox]').each(function() {
if (this.checked) {
sList += $(this).val() + ","
}
});

$("#To").val(sList.slice(0, -1));
});
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
var cpy = [{
"Billdate": "2018-08-04",
"Outlet": "JAYANAGAR",
"Total": 518212,
"Cash": 508161,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "10051",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-04",
"Outlet": "MALLESHWARAM",
"Total": 104801,
"Cash": 102675,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "2126",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-04",
"Outlet": "KOLAR",
"Total": 138151,
"Cash": 138151,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "JAYANAGAR",
"Total": 628358,
"Cash": 608336,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "20022",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "MALLESHWARAM",
"Total": 115113,
"Cash": 108903,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "6210",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-05",
"Outlet": "KOLAR",
"Total": 134107,
"Cash": 134107,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-06",
"Outlet": "JAYANAGAR",
"Total": 177866,
"Cash": 177866,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-06",
"Outlet": "KOLAR",
"Total": 66095,
"Cash": 66095,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "JAYANAGAR",
"Total": 283124,
"Cash": 277098,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "6026",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "MALLESHWARAM",
"Total": 58789,
"Cash": 58214,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "575",
"uber Eats": "0",
"Zomato": "0"
}, {
"Billdate": "2018-08-07",
"Outlet": "KOLAR",
"Total": 67886,
"Cash": 67886,
"Creditcard": 0,
"Coupon": 0,
"Paytm": 0,
"Credit": 0,
"Swiggy": "0",
"uber Eats": "0",
"Zomato": "0"
}]

function getDataList(jsn) {
var Billdate = [];
var Outlet = [];
var SalesType = [];
Billdate = [...new Set(jsn.map(ele => ele.Billdate))];
Outlet = [...new Set(jsn.map(ele => ele.Outlet))];
for (let i in jsn[0]) {
if (i !== 'Billdate' && i !== 'Outlet') {
SalesType.push(i)
}
}

return {
Billdate,
Outlet,
SalesType
}

}

function structureJSON(obj) {
var arr = [];
obj.Billdate.forEach((ele1, index1) => {
obj.SalesType.forEach((ele, index) => {
let row;
if (index === 0) {
row = {
Billdate: ele1,
SalesType: ele
};
} else {
row = {
Billdate: "",
SalesType: ele
};
}
obj.Outlet.forEach((ele2, index2) => {
var selected = cpy.filter((ele3, index3) => {
return ele3.Billdate === ele1 && ele3.Outlet == ele2
});
if (selected.length != 0)
row[ele2] = selected[0][ele]
else
row[ele2] = "0";
})
arr.push(row)
})

})

return arr;

}

var tableValue = structureJSON(getDataList(cpy))
addTable(tableValue)

function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table table-striped table-bordered table-hover"
}),
$thd = $("<thead/>"),
$tb = $("<tbody/>"),
$trh = $("<tr/>", {
"class": "text-center"
});

$.each(Object.keys(tableValue[0]), function(_, val) {
$("<th/>").html(val).appendTo($trh);
});
$trh.appendTo($thd);
$.each(tableValue, function(_, item) {
$tr = $("<tr/>", {
"class": "filterData"
});
console.log(item.SalesType) // this one is sales type
$.each(item, function(key, value) {
if (isNaN(value)) {
$("<td/>", {
"class": "text-left"
}).html(value).appendTo($tr);
} else {
$("<td/>", {
"class": "text-right"
}).html(value.toLocaleString('en-in')).appendTo($tr);
}

$tr.appendTo($tb);
if (item.Billdate != "") {
$tr.css("background-color", "#DFADF4");

}

});
});
$tbl.append($thd).append($tb);
$("#salesBreakupTable").html($tbl);
}

$("#save").on("click", function() {
var selectedType = [];
$.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
selectedType.push($(this).val());
});
$.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
$(this).parent().css("display", "none");
$(this).parent().addClass("hide-data");
} else {
$(this).parent().css("display", "");
$(this).parent().removeClass("hide-data");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<label for="subCategoryCode">Filter Data :</label>
<div class="input-group" id="hideFilter">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="To" id="To" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li><label> <input type="checkbox" value="Cash"> Cash </label></li>
<li><label> <input type="checkbox" value="Creditcard"> Creditcard </label></li>
<li><label> <input type="checkbox" value="Coupon"> Coupon </label></li>
<li><label> <input type="checkbox" value="Credit"> Credit </label></li>
<li><label> <input type="checkbox" value="Swiggy"> Swiggy </label></li>
<li><label> <input type="checkbox" value="uber Eats"> uber Eats </label></li>
<li><label> <input type="checkbox" value="Zomato"> Zomato </label></li>
</ul>
</div>
<button type="button" class="commonButton" id="save">
<i class="fa fa-search"></i>&nbsp;Go
</button>
</div>
<div align="Center" class="table table-responsive" id="commonDvScroll">
<table id="salesBreakupTable"></table>
</div>

我只在您的代码中添加了这部分:

$("#save").on("click", function() {
var selectedType = [];
$.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
selectedType.push($(this).val());
});
$.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
$(this).parent().css("display", "none");
$(this).parent().addClass("hide-data");
} else {
$(this).parent().css("display", "");
$(this).parent().removeClass("hide-data");
}
});
});

我已更新您的 Excel 代码如下:

$("#export").click(function() {
var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');

copyTable.insertAfter($("#dailySales"));
copyTable.find('.hide-data').remove();

copyTable.table2excel({
filename: "Daily Sales Report.xls"
});
copyTable.remove();
});

display:none使用 find() 找不到在 jQuery 中,我添加了该类并在 find() 中使用该类哪些可以完成这项工作。

关于javascript - 如何隐藏 HTML 表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55899448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com