trainTest.html-526互联

<!DOCTYPE html>
<html>
<head>
    <%include("/WEB-INF/pages/include/listCss.btl") {}%>
    <link href="https://cdn.xiaoluxueche.com/staticSource/bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet">
    <%include("/WEB-INF/pages/include/listScript.btl") {}%>
    <script src="https://cdn.xiaoluxueche.com/staticSource/bootstrap-switch/bootstrap-switch.min.js"></script>
</head>
<body>
<h1>测试</h1>
<div id="table-wrapper">
    <table>
        <thead>
        <tr>
            <th>描述</th>
            <th>类型</th>
            <th>时间</th>
            <th>创建人</th>
            <th>创建ip</th>
        </tr>
        </thead>
        <tbody id="table-body">
        <!-- 这里将通过 JavaScript 动态添加表格行 -->

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

</body>
<script>
    window.onload = function() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                var responseData = response.data
                var res = responseData.list
                window.console.log(res)
                // 获取表格主体的引用
                var tableBody = document.getElementById("table-body");

                // 遍历数据数组，动态创建并添加表格行
                res.forEach(function(item) {
                    var row = document.createElement("tr");

                    var descriptionCell = document.createElement("td");
                    descriptionCell.textContent = item.logTitle;
                    row.appendChild(descriptionCell);

                    var typeCell = document.createElement("td");
                    typeCell.textContent = item.modelName;
                    row.appendChild(typeCell);

                    var timeCell = document.createElement("td");
                    timeCell.textContent = item.createdate
                    ;
                    row.appendChild(timeCell);

                    var creatorCell = document.createElement("td");
                    creatorCell.textContent = item.createperson;
                    row.appendChild(creatorCell);

                    var ipCell = document.createElement("td");
                    ipCell.textContent = item.createIp;
                    row.appendChild(ipCell);

                    tableBody.appendChild(row);
                });
            }
        };
        xhr.open('GET', '${basePath}/manager/period/list', true);
        xhr.send();
    };
</script>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e6e6e6;
    }
</style>
</html>