回流表在循环中生成不响应 [英] reflow table generated in loop not responsive

问题描述

我在 ajax成功后，在 jquery mobile 中的循环中生成 reflow表 。但是问题是表不响应。在小屏幕上，生成的表应该通过将表列折叠为堆叠的表示来工作，该表示看起来像每行的标签/数据对块。当我输出表标记时，我从循环生成并复制/粘贴到一个单独的页面，表看起来很好，是响应。

I am generating a reflow table in loop in jquery mobile after the ajax success. However the problem is the table is not responsive. On small screens the table generated is supposed to work by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. When I output the table markup I generate from loop and copy/paste into a separate page, the table looks fine and is responsive.

我生成的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>

当我复制生成的标记并粘贴到单独的文件中时，看起来像是小屏幕 ，这是我需要。

Looks like this in small screen when I copy the markup generated and paste in a separate file and this is what I need.

但是当我使用代码动态操作：

However when I do it dynamically with the code:

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看起来不在这个布局的地方。我使用jQM提供的默认表 class =ui-responsive table-stroke。

It generates a normal layout unresponsive table like in the image below which retains the same structure even in smaller screen. Also the css looks out of place in this layout. I am using the default table class="ui-responsive table-stroke" as provided by jQM.

>

我生成的标记工作正常。我不知道这里的问题是什么。

The markup I generate is working fine. I cannot figure out what is the problem here.

推荐答案

当你创建动态html像你的情况下，你必须更新页面内容使用

When you create dynamically html like in your case you have to update the page content using

$('page_id').trigger('pagecreate');

这篇关于回流表在循环中生成不响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！