使用jQuery构建表格-优快云博客

本文链接：https://blog.youkuaiyun.com/lyf18779011168/article/details/118224090

html页面：

jquery.min.js文件可以自己下载，在这不做其他叙述了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/css/supplierTable.css">
</head>
<body>
<div class="table-div">
    <table cellpadding="0" cellspacing="0">
        <thead id="thead"></thead>
        <tbody id="tbody"></tbody>
    </table>
</div>
<script src="resources/js/jquery.min.js"></script>
<script type="text/javascript">
    let dataSource = {
        theadData: ['2020-03-01', '2020-03-02', '2020-03-03', '2020-03-04', '2020-03-05','2020-03-06', '2020-03-07'],
        tbodyData: [
            {
                supplierName: '供应商1',
                moneyList:['1000', '1000', '1000', '1000', '1000','1000', '1000']
            }, {
                supplierName: '供应商2',
                moneyList:['1000', '1000', '1000', '1000', '1000','1000', '1000']
            },
        ]
    }
    /**
     *  查询操作
     */
    $(document).ready(function(){
        creatTable(dataSource.theadData, dataSource.tbodyData)
    })
    /**
     * 构建table
     * @param theadData table 头部值
     * @param tbodyData table 内容值
     */
    function creatTable(theadData, tbodyData) {
        // 构建头部
        let tHeadHtml = "<tr>"
        // 头部第一栏特殊处理，不参与取值
        tHeadHtml += "<th id='lineTd'>" +
            "<span style='float:left;margin-top:20px;'>供应商</span>\n" +
            "<span style='float:right;'>日期</span>" +
            "</th>"
        for (let j = 0; j < theadData.length; j++) {
            tHeadHtml += "<th>" + theadData[j] + "</th>"
        }
        tHeadHtml += "</tr>"
        // tHeadHtml生成，赋值给thead
        $("#thead").html(tHeadHtml)
        // 构建tbody内容
        let  tbodyHtml = ''
        for (let i = 0; i < tbodyData.length; i++) {
            tbodyHtml += '<tr>'
            tbodyHtml += "<td>" + tbodyData[i].supplierName + "</td>"
            bodyList = tbodyData[i].moneyList
            for (let j = 0; j < bodyList.length; j++) {
                tbodyHtml += "<td>" + bodyList[j] + "</td>"
            }
            tbodyHtml += "</tr>
            //tbodyHtml生成，赋值给tbody
            $("#tbody").html(tbodyHtml)
        }
    }
</script>
</body>
</html>

css页面：

.table-div{
    width: 100%;
    overflow:auto;
    text-align: center;
}
table{
    width: 90%;
    margin: 10px auto;
}
table tr th,table tr td{
    border: 1px solid #666666;
    text-align: center;
    padding: 5px;
    min-width: 100px;
}
#lineTd {
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}

效果图：

js动态渲染table