javascript - jQuery 动态向表添加列不起作用

Question

我正在尝试使用 jQuery 动态生成列并将其添加到表中，即使在 javascript 控制台上没有检测到错误，也不会出现任何列。

我想做的事情的流程

  get JSON for the table -> generate  the HTML -> remove existing columns to update -> append the new data to the table

## 预期生成的 HTML

  <table id="buy_order" class="table">
     <thead>
      <tr>
        <th scope="col">Price of buy orders(BTC)</th>
        <th scope="col">Amount of buy orders(<%=@currency_id%>)</th>
       </tr>
      </thead>
     <tbody>
       <tr>
        <td class="table-default">
         <div class="parent">
          <div class="overlay bg-danger" style="width:10%">&nbsp;</div>
           0.003
        </div>
        </td>
        <td class="table-default">1</td>
      </tr>
     </tbody>
 </table>

JSON

  [["0.003",1]]

第一个是价格，第二个是金额

javascript

 <script>
           $(function(){
           setInterval(function(){
            $(function() {
               $.getJSON("http://localhost:3000/buys/order_book?currency_id=ryu", function(data){
                    var buy_order = "";
                    for (i = 0; i < data.length; i++) {
                       buy_order += "<tr>\n";
                        for (j = 0; j < data[i].length; j++) {
                           width =data[i][1]*10;
                            buy_order += $("<td>").addClass("table-default");
                            buy_order += $("<div>").addClass("parent")+$(($("<div>").addClass("overlay bg-success"))).css("width",width+"%")+"&nbsp;"+"</div>"+data[i][j]+"</div>";
                            buy_order += "</td>\n";
                         }
                      buy_order += "</tr>\n";
                       console.log(buy_order)
                    }
                     buy_order=$(buy_order).hide().fadeIn(1000);
                    $("#buy_order").empty();
                   $("#buy_order").append(buy_order);
                });
            });
            },5000);
          });
     </script>

谢谢

Answer 1

你应该修改

$("#buy_order").append(buy_order);

进入:

$("#buy_order").find("tbody").append(buy_order);