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

Answer 2

试试这个 -

 <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 class='table-default'>";
                                buy_order += "<div class='parent'><div class='overlay bg-success' style='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 3

检查一下。

$(function(){
           setInterval(function(){            
               $.getJSON("http://localhost:3000/buys/order_book?currency_id=ryu", function(data){
                    var buy_order = "";
					//var data='[["0.003",11]]';
					//data=JSON.parse(data);
					//console.log(data);
                    for (i = 0; i < data.length; i++) {
						  buy_order += "<tr>\n";
						   for (j = 0; j < data[i].length; j++) {
							   buy_order+='<td class="table-default"><div class="parent">';
							   buy_order+='<div class="overlay bg-danger" style="width:10%">&nbsp;</div>';
							   buy_order+=data[i][j];
							   buy_order+='</div></td>';
						    }
                         
                      buy_order += "</tr>\n";
                      
                    }
                   buy_order=$(buy_order).hide().fadeIn(1000);
                   $("#amount_body").empty();
                   $("#amount_body").html(buy_order);
                });            
           },5000);
          });

<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 id="amount_body">
       <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>