我在index.html中有以下代码。执行该页面时，会显示一个页面 使用登录和注销按钮，当用户单击登录时，将显示另一个页面 div=AuthBody ，现在当用户提供凭据并单击登录按钮时，它会连接到数据库并将数据写入表 div 元素，但是结果显示的外观和感觉与前两页不同
如何确保表格结果显示在与前两页相同的区域/外观和感觉中？
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<div id="AppBody">
<div class="header">
<h1>Custom Login Module</h1>
</div>
<div class="wrapper1">
<input type="button" value="Login" onclick="getSecretData()" />
<input type="button" value="Logout" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" />
</div>
</div>
<div id="AuthBody" style="display: none">
<div id="loginForm">
Username:<br/>
<input type="text" id="usernameInputField" /><br />
Password:<br/>
<input type="password" id="passwordInputField" /><br/>
<input type="button" id="loginButton" value="Login" />
<input type="button" id="cancelButton" value="Cancel" />
</div>
</div>
<div id="ResTable" style="display: none">
<div class="header">
My Dispute List
</div>
<div class="wrapper">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="mytable">
<thead>
<tr id="loadChat">
<th data-priority="1">Dispute Number</th>
<th data-priority="2">Status</th>
<th data-priority="3">Start Date</th>
<th data-priority="4">Customer Name</th>
<th data-priority="5">DRO</th>
<th data-priority="6">Dispute Manager</th>
</tr>
</thead>
</table>
</div>
</div>
将数据写入表的java脚本代码
var mytabledata = "<table><tr><th> DISPUTE NUMBER </th>" + "<th>DISPUTE STATUS </th>" + "<th>START DATE </th>" + "<th>CUSTOMER NAME </th>" + "<th> DRO </th>" + "<th>DISPUTE MANAGER </th>";
if (result.invocationResult.resultSet.length > 0) {
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var row = $("<tr />");
row.append($("<td>" + result.invocationResult.resultSet[j].DISP_NUMBER + "</td>"));
row.append($("<td>" + result.invocationResult.resultSet[j].DISP_STATUS + "</td>"));
row.append($("<td>" + result.invocationResult.resultSet[j].DISP_CREATE_DATE + "</td>"));
row.append($("<td>" + result.invocationResult.resultSet[j].CUST_CONT_NAME + "</td>"));
row.append($("<td>" + result.invocationResult.resultSet[j].DISP_RES_OWNER + "</td>"));
row.append($("<td>" + result.invocationResult.resultSet[j].DISP_MANAGER + "</td>"));
$("#loadChat").append(row);
$('#AppBody').hide();
$('#AuthBody').hide();
$('#ResTable').show();
}
最佳答案
看起来您的代码正在将损坏的 HTML 代码添加到 thead 中，其中不应包含每个结果数据，而应包含每个元素的标题。
试试这个
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var tmp = "<tr>";
var resSet = result.invocationResult.resultSet[j];
for(res in resSet){
tmp += "<td>" + resSet[res] + "</td>";
}
$("#mytable > tbody").append(tmp+"</tr>");
}
在 HTML 中
<thead>
<tr id="loadChat">
<th data-priority="1">Dispute Number</th>
<th data-priority="2">Status</th>
<th data-priority="3">Start Date</th>
<th data-priority="4">Customer Name</th>
<th data-priority="5">DRO</th>
<th data-priority="6">Dispute Manager</th>
</tr>
</thead>
<tbody>
<!-- database result would be here -->
</tbody>
</table>
关于javascript - 需要有关表格格式的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25346522/