JQuery移动版始终显示表头

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");

我希望这能对你有所帮助！