Question

我在index.html中有以下代码。执行此页面时，将显示一个页面登录＆amp;注销按钮，当用户点击登录时，另一页显示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();
    }

enter image description here

Answer 1

看起来您的代码正在将损坏的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>

Answer 2

jQuery Mobile表小部件的基本结构如下。您错过了tbody部分。

<table data-role="table" data-mode="columntoggle" id="mytable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>info 1</th>
      <th>info 1</th>
      <th>info 1</th>
    <tr>
    <tr>
      <th>info 2</th>
      <th>info 2</th>
      <th>info 2</th>
    <tr>
  </tbody>
</table>

此外，当您动态更新表格的详细信息时，您需要rebuild表格。

$("#mytable").table("rebuild");

动态表的一个例子。

var data = [{
    "DISP_NUMBER": "1",
        "DISP_STATUS": "online",
        "DISP_CREATE_DATE": "01/02/2014",
        "name": "John"
}, {
    "DISP_NUMBER": "2",
        "DISP_STATUS": "offline",
        "DISP_CREATE_DATE": "10/05/2014",
        "name": "Dao"

}, {
    "DISP_NUMBER": "3",
        "DISP_STATUS": "offline",
        "DISP_CREATE_DATE": "10/05/2014",
        "name": "Anonymous"
}];

$.each(data, function (i, value) {
    var row = $("<tr />");
    row.append($("<th>" + value.DISP_NUMBER + "</th>"));
    row.append($("<td>" + value.DISP_STATUS + "</td>"));
    row.append($("<td>" + value.DISP_CREATE_DATE + "</td>"));
    row.append($("<td>" + value.name + "</td>"));

    /* append to tobody */
    $("#mytable tbody").append(row);
});

/* rebuild table and column-toggle */ 
$("#mytable").table("rebuild");

<强> Demo

需要有关表格格式的帮助

2 个答案: