JQuery Mobile始终显示表头

Question

我动态地填充回流表。一旦我有一个小型的移动设备显示器，内容切换到垂直对齐按预期。 但表格标题不再可见！我怎样才能让他们始终可见？ 注意：当我手动创建表时，它可以很好地工作。

<table data-role="table" id="table" data-mode="reflow" class="ui-responsive table-stroke "> 
<thead> 
<tr> 
    <th></th> 
    <th>Tag 1</th> 
    <th>Tag 2</th> 
    <th>Tag 3</th> 
    <th>Tag 4</th> 
    <th>Tag 5</th> 
    <th>Tag 6</th> 
    <th>Tag 7</th> 
</tr> 
</thead> 
<tbody> 
//Body content is filled dynamically 
</tbody> 
</table> 

//Fill table 
var headers = ["Ruhe Herzfrequenz", "Schlafqualitaet", "Energielevel", "Selbstverstrauen & Selbstbewusstsein", "Muskelschmerzen", 
"Motivation und Trainingsenthuiasmus", "Einstellung zu Arbeit/Studium/Schule", "Kommunikation mit dem Trainer", 
"Gesundheit" 
]; 
for (var i = 0; i < headers.length; i++) { 
$('tbody', '#table').append("<tr>"); 
for (var j = 0; j < 7; j++) { 

    if (headers[i] != "Ruhe Herzfrequenz") { 
     var str = ""; 
     var title = "<td>" + headers[i] + "</td>"; 
     str += "<td><fieldset data-role=\"controlgroup\" data-type=\"horizontal\" id=\"" + headers[i] + j + "\" name=\"" + headers[i] + j + "\" >"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-1\" value=\"1\" checked=\"checked\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-1\">1</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-2\" value=\"2\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-2\">2</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-3\" value=\"3\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-3\">3</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-4\" value=\"4\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-4\">4</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-5\" value=\"5\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-5\">5</label>"; 
     str += "</fieldset></td>"; 
    } else { 
     var str = ""; 
     var title = "<td>Ruhe Herzfrequenz<input type=\"number\" id=\"normalHeartRate\" name=\"normalHeartRate\" placeholder=\"Normalwert\" step=\"any\" required\/></td>"; 
     str += "<td><fieldset data-role=\"controlgroup\" data-type=\"horizontal\" id=\"" + headers[i] + j + "\" name=\"" + headers[i] + j + "\" >"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-1\" value=\"1\" checked=\"checked\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-1\">1</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-2\" value=\"2\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-2\">2</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-3\" value=\"3\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-3\">3</label>"; 
     str += "<input name=\"" + headers[i] + j + "\" id=\"" + headers[i] + j + "-choice-4\" value=\"4\" type=\"radio\">"; 
     str += "<label for=\"" + headers[i] + j + "-choice-4\">4</label>"; 
     str += "</fieldset></td>"; 
    } 

    if (j == 0) { 
     $('tbody', '#table').append(title + str); 
    } else { 
     $('tbody', '#table').append(str); 
    } 
} 
$('tbody', '#table').append("</tr>"); 
} 
$("#table").table("refresh"); 
$("#table").trigger("create"); 

Answer 1

在动态添加表格内容之后，是否刷新了小部件？如果不试试这个：

$("#yourTableID").table("refresh"); 

我希望这可以帮到你！