<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>打印格式</title>
<style type="text/css">
.itemxuanzhong{background-color: red !important;}
table{
border-collapse: collapse;
}
table .xuanzhong{display:table-row}
.dingdan_tr {display: none;}
.disi{
display: inline;
}
.juzhong{
text-align: center;
}
.disb {
display: block;
}
.scgdtbody {
height: 270px;
border: 1px solid #CCC;
border-top: none;
}
.scroolbar {
overflow: scroll;
overflow-x: hidden;
}
.trd tbody tr:nth-child(2n+1) {
background-color: #EDF1EF;
}
.trd td {
border: 1px solid #CCC;
word-break: break-all;
}
</style>
</head>
<body>
<div style="margin:30px auto;width:1000px;text-align: center;">
<h1>生产门皮数量提示单(打印格式)</h1>
<table class="trd juzhong" style="width:1000px;margin-top:10px;" >
<thead class="disi">
<tr style="height:25px;">
<td style="width:100px;">门皮类别</td>
<td style="width:100px;">门皮名称</td>
<td style="width:100px;">当前库存</td>
<td style="width:100px;">总使用</td>
<td style="width:100px;">缺货</td>
<td style="width:100px;">上限</td>
<td style="width:100px;">下限</td>
<td style="width:100px;">序号</td>
<td style="width:100px;">订单号</td>
<td style="width:100px;">使用</td>
</tr>
</thead>
<tbody class="disb scroolbar scgdtbody" id="tb" style="height:400px;">
</tbody>
</table>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// var tr_height=25;
// var td_width=100;
var data=[
{
a:"(无)香杉1",b:"A-001",c:2,d:120,e:108,f:200,i:1,g:[1,],h:["1-1"],j:[50,]
},
{
a:"(无)香杉2",b:"A-002",c:2,d:100,e:98,f:1,i:1,g:[1,2,],h:["1-1","1-3"],j:[50,100]
},
{
a:"(无)香杉3",b:"A-003",c:"待添加",d:70,e:70,f:1,i:1,g:[1,2,1],h:["1-1","1-3","1-9"],j:[50,50,50]
},
{
a:"(无)香杉4",b:"A-004",c:2,d:120,e:108,f:200,i:1,g:[1,2,1,3],h:["1-1","1-3","1-9","1-10"],j:[50,50,50,90]
},
{
a:"(无)香杉5",b:"A-005",c:"待添加",d:70,e:70,f:1,i:1,g:[1,2,1,1,1],h:["1-1","1-3","1-9","1-9","1-50"],j:[50,50,50,50,100]
},{
a:"(无)香杉5",b:"A-005",c:"待添加",d:70,e:70,f:1,i:1,g:[1,2,1,1,1],h:["1-1","1-3","1-9","1-9","1-50"],j:[50,50,50,50,100]
},
]
for(var i =0;i<data.length;i++){
var str="";
var children_tr="";
var everone="";
everone+=`<tr class="everone_tr"><td style="width:100px;">${data[i].a}</td><td style="width:100px;">${data[i].b}</td><td style="width:100px;">${data[i].c}</td><td style="width:100px;">${data[i].d}</td><td style="width:100px;">${data[i].e}</td><td style="width:100px;">${data[i].f}</td><td style="width:100px;">${data[i].i}</td><td style="width:100px; colspan="3""><table id="z_tb" style="width:280px;">`
for(var j=0;j<data[i].g.length;j++){
children_tr+=`<tr><td style="width:100px;">${data[i].g[j]}</td><td style="width:100px;">${data[i].h[j]}</td><td style="width:80px;">${data[i].j[j]}</td></tr>`
}
str+=everone+children_tr+'</table></td>'
$("#tb").append(str);
}
</script>
</html>
