前端多行表格拼接和打印

最新推荐文章于 2023-10-24 12:14:24 发布

sakuraxiaoyu

最新推荐文章于 2023-10-24 12:14:24 发布

阅读量487

点赞数 1

分类专栏： web前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_40830369/article/details/118482617

版权

web前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

先上图看效果。
在这里插入图片描述
总体样式就如上所示。根据数据的数组里面的条数来决定单元格的行数。总体思想是先用sessionStorage.getItem()取到数组里面的数据，然后进行遍历，把数组里面的对象一个个拼接起来，最后就是一个多行的表格。

        <div class = "returnInstructionTable">
            <table class="table table-bordered table-condensed" id='accessoryTable'>
            </table> 
        </div>

在body里面加上如上的代码，记得设置id，到时候会发表格插入在这个id的这个位置。

<script>
    window.onload = function() {
    //拿到数据
        const printdataAccessory = JSON.parse(sessionStorage.getItem('printdataAccessory'))
        //这表是表格的表头的位置，不需要重复
            let sccessoryList = `
            <tr>
                    <th style="width: 100px;">退单原因</th>
                    <th style="width: 80px;">供应商名称</th>
                    <th style="width: 80px;">采购订单号</th>
                    <th style="width: 80px;">发票号</th>
                    <th style="width: 80px;">发票金额</th>
                    <th style="width: 80px;">发票张数</th>
            </tr>`
            //对拿到的数据进行遍历，+= 就是起到了一个拼接的作用
            printdataAccessory.forEach((element,index) => {
                sccessoryList += `
                <tr>
                    <td style="width: 100px;"><span id="returnReason${index}"></span></td>
                    <td style="width: 80px;"><span id="supplier${index}"></span></td>
                    <td style="width: 80px;"><span id="purchaseOrder${index}"></span></td>
                    <td style="width: 80px;"><span id="invoiceCode${index}"></span></td>
                    <td style="width: 80px;"><span id="billValue${index}"></span></td>
                    <td style="width: 80px;"><span id="billNum${index}"></span></td>
                </tr>
                `
            // get到对应的ID，然后把拼接好的值sccessoryList给到他
            document.getElementById('accessoryTable').innerHTML = sccessoryList
            console.log('sccessoryList',sccessoryList);
        });
	//这边同理其实，你想想上边是单元格的一个个循环，这边当然也是要把数据循环出来一个个赋值给到单元格里面。
    setTimeout(() => {
        const printdataAccessory = JSON.parse(sessionStorage.getItem('printdataAccessory'))
        console.log('printdataAccessory',printdataAccessory)
        printdataAccessory.forEach((element,index) => {
            document.getElementById(`returnReason${index}`).innerHTML = printdataAccessory[index]?.name
            document.getElementById(`supplier${index}`).innerHTML = printdataAccessory[index]?.supplierName
            document.getElementById(`purchaseOrder${index}`).innerHTML = printdataAccessory[index]?.supplierCode
            document.getElementById(`invoiceCode${index}`).innerHTML = printdataAccessory[index]?.invoiceCode
            document.getElementById(`billValue${index}`).innerHTML = printdataAccessory[index]?.amount
            document.getElementById(`billNum${index}`).innerHTML = printdataAccessory[index]?.pageNum
        })
        window.print()
    },1000)
}
</script>