特殊图表实现代码

最新推荐文章于 2022-02-14 14:17:48 发布

theOtherSky

最新推荐文章于 2022-02-14 14:17:48 发布

阅读量274

点赞数

分类专栏：前端技巧

本文链接：https://blog.csdn.net/qq_35181466/article/details/88661452

版权

前端技巧专栏收录该内容

42 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">            
        /*模拟对角线*/ 
        .out{ 
            border-top:60px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/ 
            width:0px;/*让容器宽度为0*/ 
            height:0px;/*让容器高度为0*/ 
            border-left:180px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/ 
            position:relative;/*让里面的两个子容器绝对定位*/ 
        } 
        .tr{font-style:normal;display:block;position:absolute;top:-45px;left:-60px;} 
        .lb{font-style:normal;display:block;position:absolute;top:-25px;left:-140px;}
    </style>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> -->
</head>
<body>
    <table border="2" style='margin:200px'>
		<tbody>
			<tr>
			  <th height="41" colspan="2" style="background-color: #f2f2f2; padding: 0.0px;">
				  <div class="out">
					  <em class="tr">厚度(mm)</em>
					  <em class="lb">名称</em>
				  </div>
			  </th>
			  <th colspan="1">姓名</th>
			  <th colspan="1">出图数（张）</th>
			  <th colspan="1">总出图量（张）</th>
			</tr>
		</tbody>
      <tbody id="content">
        

      </tbody>
    </table>
    <div></div>
  <script>

	var qwerty1=[
		{major:"电气",username:"吴维全",picnum:307},
		{major:"电气",username:"陈昊琳",picnum:354},
		{major:"电气",username:"江绍冬",picnum:222},
		{major:"电气",username:"薛飞",picnum:14},
		{major:"电气",username:"王泷",picnum:80},
		{major:"电气",username:"蔡亮",picnum:11},
		{major:"弱电",username:"张雁",picnum:387},
		{major:"弱电",username:"郑美容",picnum:34},
		{major:"弱电",username:"曾钢",picnum:171},
		{major:"弱电",username:"葛恒",picnum:255},
		{major:"弱电",username:"孟和",picnum:140}
	]

	$(document).ready(function(){

		var dataMap = new Map();
		var totalNum = 0;
		for(var i=0; i< qwerty1.length; i++){
			totalNum += qwerty1[i].picnum;
			if(dataMap.get(qwerty1[i].major) == null){
				var marjorArray =new Array();
				marjorArray.push(qwerty1[i]);
				dataMap.set(qwerty1[i].major, marjorArray);
			} else {
				dataMap.get(qwerty1[i].major).push(qwerty1[i]);
			}
		}

		var trStr = "";
		var firstTr = true;
		dataMap.forEach(function (item, key, mapObj) {
			for(var j=0; j< item.length; j++){
				trStr+="<tr>";
				if(j == 0){
					trStr += "<th rowspan='"+item.length+"' colspan='2'>" + key + "</th>";
				}
				trStr += "<th>"+item[j].username+"</th>";
				trStr += "<th>"+item[j].picnum+"</th>";
				if(firstTr && j == 0){
					trStr += "<th rowspan='"+qwerty1.length+"'>"+totalNum+"</th>";
					firstTr = false;
				}
				trStr+="</tr>";
			}
		});

		$("#content").html(trStr);

	}); 

  </script>
</body>
</html>