HTML动态拼接表头动态匹配表列,并导出Excel

最新推荐文章于 2024-03-29 17:26:58 发布

置顶万德佛

最新推荐文章于 2024-03-29 17:26:58 发布

阅读量776

点赞数 1

本文链接：https://blog.csdn.net/qq_39251440/article/details/111609432

版权

HTML表格 JavaScript 数据处理 CSV导出数据分组

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 0 订阅

订阅专栏

excel

4 篇文章 0 订阅

订阅专栏

注意:

1.请记得引入js文件;

2.仅供参考,可自行优化,如有错误之处,还请多多指教~.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				width: 80%;
			}
			table tr th,td{
				border: 1px solid #e3e3e3;
				box-shadow: 1px 5px 5px #e3e3e3;
				padding: 5px;
			}
			table tr th{
				background-color: #0cb6ff;
				border: 1px solid #e3e3e3;
			}
			table tr td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<table border="0" cellspacing="0" cellpadding="0">
				<thead id="tbThead">
					<tr>
						<th>sort</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
					</tr>
				</thead>
				<tbody id="tbTbody">
					<tr>
						<td>sd5</td>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
						<td>Data</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var dataList = [
			{
				goodsid: "12",
				goodstype: "生产-Output",
				createdate: "2021/11/30",
				counts: "4300",
				sortname: "D52"
			},
			{
				goodsid: "13",
				goodstype: "生产-Input",
				createdate: "2021/11/30",
				counts: "4300",
				sortname: "D52",
			},
			{
				goodsid: "14",
				goodstype: "生产-Input",
				createdate: "2021/11/30",
				counts: "4300",
				sortname: "D52",
			},
			{
				goodsid: "15",
				goodstype: "业务-出货",
				createdate: "2021/11/30",
				counts: "4500",
				sortname: "D52",
			},
			{
				goodsid: "16",
				goodstype: "业务-出货",
				createdate: "2021/11/30",
				counts: "4500",
				sortname: "D52",
			},
			{
				goodsid: "17",
				goodstype: "业务-出货",
				createdate: "2021/11/29",
				counts: "4200",
				sortname: "D52",
			},
			{
				goodsid: "18",
				goodstype: "业务-出货",
				createdate: "2021/11/29",
				counts: "4200",
				sortname: "D52",
			},
			{
				goodsid: "19",
				goodstype: "业务-交货",
				createdate: "2021/11/29",
				counts: "4200",
				sortname: "D52",
			},
			{
				goodsid: "20",
				goodstype: "生产-Output",
				createdate: "2021/11/29",
				counts: "4200",
				sortname: "D52",
			}
		]
		showTable(dataList)
		function showTable(dtList){
			console.log(dtList)
			var gTypeList = new Array();
			var hdTimeList = new Array();
			for (var i = 0; i < dtList.length; i++) {
				//筛选类型
				var add = true;
				for (var j = 0; j < gTypeList.length; j++) {
					if(dtList[i].goodstype == gTypeList[j]){//重点
						add = false;
						break;
					}
				}
				if(add){
					gTypeList.push(dtList[i].goodstype);
				}
				//时间去重
				var add2 = true;
				for (var j = 0; j < hdTimeList.length; j++) {
					if(dtList[i].createdate == hdTimeList[j]){//重点
						add2 = false;
						break;
					}
				}
				if(add2){
					hdTimeList.push(dtList[i].createdate);
				}
			}
			console.log(gTypeList)
			//时间排序从小到大
			hdTimeList.sort((a, b) => new Date(a) - new Date(b))
			console.log(hdTimeList)
			//导出开始拼接
			let strDown = `類型,專案,`;//请注意这里是字符串模板 ``
			//表头拼接
			let thHtml = "";
			thHtml += "<tr><th>類型</th><th>專案</th>"
			for (var i = 0; i < hdTimeList.length; i++) {
				thHtml += "<th>" + hdTimeList[i] + "</th>"
				strDown += `${hdTimeList[i]},`;//导出拼接头部
			}
				strDown+='\n';//导出换行
			thHtml += "</tr>"
			$("#tbThead").html(thHtml);
			//表body拼接
			var strHtml = "";
			for (var i = 0; i < gTypeList.length; i++) {
				strDown += `${gTypeList[i]},`;//导出拼接body部分
				strHtml += "<tr><td>"+ gTypeList[i] +"</td>";
				let stMark = null;
				let countsList = new Array();
				for (var j = 0; j < dtList.length; j++) {
					if (gTypeList[i] == dtList[j].goodstype) {//对比类型
						//专案
						if (stMark !=  dtList[j].sortname) {
							strDown += `${dtList[j].sortname},`;
							strHtml += "<td>"+ dtList[j].sortname +"</td>";
						}
						stMark = dtList[j].sortname;//标记专案
                        //查找 对应日期位置
						let dIndex = hdTimeList.findIndex((v) => {
							return v == dtList[j].createdate;
						})
						//查找countsList数组中是否存在,存在则相加
						if (countsList[dIndex] === undefined) {
							countsList[dIndex] = parseInt(dtList[j].counts);
						}else{
							countsList[dIndex] += parseInt(dtList[j].counts);
						}
					}
				}
				console.log(countsList)
				for (var k = 0; k < hdTimeList.length; k++) {
					console.log(countsList[k])
					if (countsList[k] == undefined) {
						strDown += `,`;
						strHtml += "<td></td>";
					}else{
						strDown += `${countsList[k]},`;
						strHtml += "<td>"+ countsList[k] +"</td>";
					}
				}
				strDown += `\n`;
				strHtml += "</tr>";
			}
			$("#tbTbody").html(strHtml);
			
			//导出
			const uri='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(strDown);
			const link=document.createElement("a");
			link.href=uri;
			link.download="报表.csv";
			link.click();
		}
		
	</script>
</html>

效果图: