Я создаю таблицу перекомпоновки в цикле jQuery mobile после успешного выполнения ajax. Однако проблема в том, что таблица не отвечает. На небольших экранах сгенерированная таблица должна работать путем сворачивания столбцов таблицы в сложенное представление, которое выглядит как блоки пар метка/данные для каждой строки. Когда я вывожу разметку таблицы, которую я генерирую из цикла, и копирую/вставляю на отдельную страницу, таблица выглядит нормально и реагирует.
Я генерирую 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.
Разметка, которую я создаю, работает нормально. Я не могу понять, в чем здесь проблема.