根據json資料來,動態的設定表格樣式,(列印格式)
阿新 • • 發佈:2018-12-29
<!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>