1

ajaxが成功した後、jQueryモバイルでループ内のリフローテーブルを生成しています。ただし、問題はテーブルが応答しないことです。小さな画面では、生成されたテーブルは、テーブルの列を各行のラベル/データ ペアのブロックのように見える積み重ねられたプレゼンテーションに折りたたむことによって機能するはずです。ループから生成したテーブル マークアップを出力し、別のページにコピー アンド ペーストすると、テーブルは問題なく表示され、応答性が高くなります。

私が生成するhtmlは次のとおりです。

<table data-role="table" id="time-table" data-mode="reflow" class="ui-responsive table-stroke">
    <thead>
       <tr>
         <th>Linje</th>
         <th>Destination</th>
         <th>Nästa tur (min)</th>
         <th>Därefter</th>
       </tr>
    </thead>
    <tbody>
       <tr>
         <th>7</th>
         <td>Resecentrum</td>
         <td>Nu</td>
         <td>11</td>
       </tr>
       <tr>
         <th>7</th>
         <td>Ö Lugnet via Resecentrum</td>
         <td>23</td>
         <td>51</td>
       </tr>
    </tbody>
</table>

生成されたマークアップをコピーして別のファイルに貼り付けると、小さな画面ではこのように見えますが、これはwhat I need.

ここに画像の説明を入力

ただし、コードで動的に行う場合:

success: function(data){
    //Generate table header and populate.
var thdata1 = "<th>"+data[2]+"</th>";
var thdata2 = "<th>"+data[3]+"</th>";
var thdata3 = "<th>"+data[4]+"</th>";
var thdata4 = "<th>"+data[6]+"</th>";

    var tblrow = $("<tr></tr>");
var thead = $("<thead></thead>");
var table = $("<table data-role=\"table\" id=\"time-table\" data-mode=\"reflow\" class=\"ui-responsive table-stroke\">");

tblrow.append(thdata1);
tblrow.append(thdata2);
tblrow.append(thdata3);
tblrow.append(thdata4);

    thead.append(tblrow);
table.append(thead)

    //Generate table body and populate.
var row = $("<tr>");
var flag = 0;
var tbody = $('<tbody>');
$.each(data, function(key, val){
    if(key >= 8){
    if(key%4 != 3){
      if(flag == 0)
        row.append("<th>"+val+"</th>");
      else
        row.append("<td>"+val+"</td>");
      flag++;
    }
    else if(key%4 == 3){
      row.append("<td>"+val+"</td>");
      tbody.append(row);
      row = $("<tr>");
      flag = 0;
    }
     }
     });
   table.append(tbody);
   table.appendTo("#contbl");
   console.log($("#contbl").html());
}

下の画像のように、小さな画面でも同じ構造を保持する、通常のレイアウトの応答しないテーブルを生成します。また、CSS はこのレイアウトでは場違いに見えます。class="ui-responsive table-stroke"jQM が提供するデフォルトのテーブルを使用しています。

ここに画像の説明を入力

私が生成したマークアップは正常に機能しています。ここで何が問題なのかわかりません。

4

1 に答える 1

1

あなたの場合のように動的にhtmlを作成するときは、ページのコンテンツを更新する必要があります

$('page_id').trigger('pagecreate');
于 2013-07-23T11:21:47.640 に答える