jQuery 动态添加列到 table 不起作用

Question

我正在尝试使用 jQuery 动态生成列并将其添加到 table，即使在 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>

jQuery 动态添加列到 table 不起作用

jQuery dynamic adding columns to a table does not work

html

javascript

jquery

erb

我想做的事情的过程

JSON

javascript