Javascript 需要表格格式方面的帮助吗_Javascript_Jquery Mobile_Ibm Mobilefirst

Javascript 需要表格格式方面的帮助吗

javascript jquery-mobile ibm-mobilefirst

Javascript 需要表格格式方面的帮助吗,javascript,jquery-mobile,ibm-mobilefirst,Javascript,Jquery Mobile,Ibm Mobilefirst,我在index.html中有以下代码。执行此页面时，将显示一个页面使用login&logout按钮，当用户单击login另一个页面div=AuthBody时会显示，现在当用户提供凭据并单击login按钮时，它会连接到数据库并将数据写入table div元素，但结果的显示外观与前两个页面不同如何确保表格结果显示在与前两页相同的区域/外观 <head> <meta charset="UTF-8"> <title>index<

我在index.html中有以下代码。执行此页面时，将显示一个页面使用login&logout按钮，当用户单击login另一个页面div=AuthBody时会显示，现在当用户提供凭据并单击login按钮时，它会连接到数据库并将数据写入table 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>


指数
window.$=window.jQuery=WLJQ；
自定义登录模块
用户名：



密码：



我的争议清单
争议编号
地位
开始日期
客户名称
德罗
争议管理人

将数据写入表的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();
    }

var mytabledata=“争议编号”+“争议状态”+“开始日期”+“客户名称”+“DRO”+“争议管理人”；
if（result.invocationResult.resultSet.length>0）{
对于（var j=0；j




看起来您的代码正在将损坏的HTML代码添加到thead
中，该ad不应包含每个结果数据，而应包含每个元素的标题
试试这个
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>");
}

for（var j=0；jtbody”）.append（tmp+”）；
}

和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>


争议编号
地位
开始日期
客户名称
德罗
争议管理人
jQuery移动表小部件的基本结构如下。您遗漏了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>

动态表的一个示例
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");

var数据=[{
“显示编号”：“1”，
“显示状态”：“联机”，
“发布创建日期”：“2014年2月1日”，
“姓名”：“约翰”
}, {
“显示编号”：“2”，
“显示状态”：“脱机”，
“发布创建日期”：“2014年5月10日”，
“名称”：“道”
}, {
“显示编号”：“3”，
“显示状态”：“脱机”，
“发布创建日期”：“2014年5月10日”，
“名称”：“匿名”
}];
$。每个（数据、函数（i、值）{
变量行=$（“”）；
行。追加（$（“”+value.DISP_NUMBER+“”）；
行。追加（$（“”+value.DISP_STATUS+“”））；
行。追加（$（“”+value.DISP\u CREATE\u DATE+“”）；
行。追加（$（“”+value.name+“”）；
/*附加到tobody*/
$（“#mytable tbody”）.append（行）；
});
/*重新生成表和列切换*/
$（“#mytable”）.table（“重建”）；


在评论中提供图片作为链接，我将用它们编辑问题。你好，Suish，谢谢你的快速回答。上面的代码正在工作，但是行值没有在正确的列下。我如何确保正确的值在正确的列下？谢谢..约翰逊还有一个问题。为什么我看到背景色a当表格数据显示时，它是白色的？如何获得JQuery mobile外观？我指的是登录页面中的背景。谢谢..约翰逊你好，奥马尔，谢谢你的回复。能够以表格格式显示数据，现在我需要提供所有行中争议编号的链接。因此，当单击争议编号链接时，他应该e转到另一个包含争议详细信息的页面，在这里我想提供一个下拉列表，其中包含一些选项，如“接受”或“拒绝”争议。您能指导我如何完成此操作吗？谢谢..@user3646990嗨，这是一个单独的问题。请发布一个包含相关详细信息的新问题。
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");