在表格格式方面需要帮助答案

【问题标题】：Need help on table formatting在表格格式方面需要帮助
【发布时间】：2014-08-17 05:21:44
【问题描述】：

我在 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();
    }

【问题讨论】：

在 cmets 中提供图片作为链接，我将与他们一起编辑问题。

标签： javascript jquery-mobile ibm-mobilefirst

【解决方案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>

【讨论】：

您好 Suish，感谢您的快速回复。上面的代码可以正常工作，但是行值没有出现在正确的列下。如何确保正确的值出现在正确的列下？谢谢..约翰逊
再问一个问题。为什么显示表格数据时背景颜色为白色？如何获得 JQuery 移动外观？我的意思是登录页面中的背景。谢谢..约翰逊

【解决方案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

【讨论】：

您好奥马尔，感谢您的回复。能够以表格格式显示数据，现在我需要在所有行中提供指向争议编号的链接。因此，当单击“争议编号”链接时，应将他带到另一个包含争议详细信息的页面，我想在其中提供一个下拉菜单，其中包含“接受”或“拒绝”争议等一些选项。你能指导我如何做到这一点吗？谢谢..
@user3646990 您好，这是一个单独的问题。请发布一个包含相关详细信息的新问题。