trainTest.html
<!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>