Question

好吧，我在这里用jQuery mobile创建了一个表：

<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（“刷新”） 刷新表。

您还可以在此处查看演示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元素？

1 个答案: