为什么没有应用 thead 元素？

Question

嗯，我在这里用 jQuery 手机创建了一个 table：

<div data-role="page" id="PageOrderList" data-theme="b">
    <div data-role="header">
        <h1>Aufträge bearbeiten</h1>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a>
    </div>
    <div data-role="main" class="ui-content">
        <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive">
            <thead>
                <tr>
                    <th>AuftragsNr.</th>
                    <th>Auftragskurztext</th>
                    <th>Langtext</th>
                </tr>
            </thead>
            <tbody id="myList">
                <tr id="8913">
                    <td>8913</td>
                    <td>Sonderauftrag</td>
                    <td>Das ist ein Sonderauftrag.</td>
                </tr>
                <tr id="1466">
                    <td>1466</td>
                    <td>Auftrag Fr. Schwarz</td>
                    <td>Ein Auftrag für Fr. Schwarz.</td>
                </tr>
                <!-- loaded by js -->
            </tbody>
        </table>
    </div>
    <div data-role="footer" align="center">
        <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button>
    </div>
</div>

我现在要做的是从 JSON 格式的文件中加载一些新行。这是文件：

{
    "order": [{
        "orderId": "4412",
        "shortText": "Lieferung für Mayer",
        "longText": "Das ist eine Lieferung für Mayer."
    }, {
        "orderId": "7899",
        "shortText": "Bestellung für Schmidt",
        "longText": "Das ist eine Bestellng für Schmidt."
    }, {
        "orderId": "3981",
        "shortText": "Sonderauftrag",
        "longText": "Das ist ein Sonderauftrag."
    }]
}

我将 id="ReloadOrderList" 与来自 jQuery 的事件侦听器一起使用。这是我的代码：

// Reload button PageOrderList
$("#ReloadOrderList").click(function() {
    $.getJSON("data/data.json", function(json) {
        console.log(json);
        var i;
        var out = "empty";
        console.log(json.order.length);

        for (i = 0; i < 3; i++) {
            out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>";
        }
        //document.getElementById("myList").innerHTML = out;
        $("#myList").append(out);
    });
});

当我按下按钮 (ReloadOrderList) 时，新内容被加载，没问题，但是 thead 元素没有应用在数据前面。这是一张形象化我的问题的图片：

application

我希望这些信息足够了 :D

Answer 1

添加新行后，您想通过调用 刷新 table。table("refresh").

您还可以在此处查看演示 jQuery Mobile Demo

$("#ReloadOrderList").click(function() {
  
  // simulated getJSON()
  var json = {
    "order": [
      { "orderId": "4412", "shortText": "Lieferung für Mayer", "longText": "Das ist eine Lieferung für Mayer." },
      { "orderId": "7899", "shortText": "Bestellung für Schmidt", "longText": "Das ist eine Bestellng für Schmidt." },
      { "orderId": "3981", "shortText": "Sonderauftrag", "longText": "Das ist ein Sonderauftrag." }
    ]
  };

  var out = "empty";

  for (i = 0; i < 3; i++) {
    out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>";
  }

  $("#myList").append(out);

  // ==========================
  // This is what you need
  // ==========================
  $("#myList").closest("table").table("refresh");
  // ==========================

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" integrity="sha256-ofETIFmuKXiVQil+cQ1tReYDB/lh0lrMyxLdsw+NG8w=" crossorigin="anonymous" />

<div data-role="page" id="PageOrderList" data-theme="b">
    <div data-role="header">
        <h1>Aufträge bearbeiten</h1>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a>
    </div>
    <div data-role="main" class="ui-content">
        <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive">
            <thead>
                <tr>
                    <th>AuftragsNr.</th>
                    <th>Auftragskurztext</th>
                    <th>Langtext</th>
                </tr>
            </thead>
            <tbody id="myList">
                <tr id="8913">
                    <td>8913</td>
                    <td>Sonderauftrag</td>
                    <td>Das ist ein Sonderauftrag.</td>
                </tr>
                <tr id="1466">
                    <td>1466</td>
                    <td>Auftrag Fr. Schwarz</td>
                    <td>Ein Auftrag für Fr. Schwarz.</td>
                </tr>
                <!-- loaded by js -->
            </tbody>
        </table>
    </div>
    <div data-role="footer" align="center">
        <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js" integrity="sha256-E3NHJIUaclYHEQ6uRnkvD72rAmbJYVJ92sCOU/0Rd7s=" crossorigin="anonymous"></script>

为什么没有应用 thead 元素？

Why are the thead elements not applied?

javascript

jquery

jquery-mobile