Question

我尝试将数据库中的详细信息显示到表中，但它会从数据库的每一行复制表。我认为问题在于附加命令，但我不知道如何解决它。

＆＃13;

$(document).ready(function() {
  listShopPage();
});

// Gets the listPage template, puts it in document, then fills it with  shop

function listShopPage() {
  $.ajax({
    url: "templates/shopList.html",
    type: "GET"
  }).done(function(html) {
    fillShopWithData(html);
  }).fail(function(xhr, status, errorThrown) {
    console.log("Error: Unable to load shopList");
  });
}

// request to get all lists
function fillShopWithData(template) {
  $.ajax({
    url: "api/taskShop/",
    type: "GET",
    dataType: "json"
  }).done(function(json) {
    var data = json["data"];
    var listShop = $("#listName");
    listShop.html("");
    for (var i = 0; i < data.length; i++) { //for each task
      var list_shop = data[i];
      var tmp = $(template); //fill shop template with data from database
      tmp.attr("name", "listshop_" + list_shop["itemName"]);
      tmp.find(".id").text(list_shop["id"]);
      tmp.find(".name").text(list_shop["itemName"]);
      tmp.find(".description").text(list_shop["description"]);
      tmp.find(".amount").text(list_shop["amount"]);
      tmp.find(".price").text(list_shop["price"]);
      listShop.append(tmp);
    }
  }).fail(function(xhr, status, errorThrown) {
    console.log("Error: Unable to load shop list");
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
index.html

<body>
  <div id="listName"></div>
</body>


shopList.html
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>id</th>
        <th>Item</th>
        <th>description</th>
        <th>amount</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody id="listName">
      <tr class="success">
        <tb class="id"></tb>
        <tb class="name"></tb>
        <tb class="description"></tb>
        <tb class="amount"></tb>
        <tb class="price"></tb>
      </tr>
      <tr class="danger">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="info">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

使用db元素显示表

0 个答案: