jQuery动态将列添加到表中不起作用答案

【问题标题】：jQuery dynamic adding columns to a table does not workjQuery动态将列添加到表中不起作用
【发布时间】：2018-03-23 07:07:15
【问题描述】：

我正在尝试使用 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>

谢谢

【问题讨论】：

这个json响应[["0.003",1]]的响应是固定的还是会改变的？
它可以改变或不变
能否请您更改完整的 JSON。你也可以改变JSON格式吗？
我可以，但是您希望我提供什么结构的 JSON？是不是像 {["price",0.003,"amount":1]}
您可以做的是创建一个提供以下输出的数组。 ( [0] => { "价格" => 0.003, "数量" => 1 }, [1] => { "价格" => 0.006, "数量" => 2 })

标签： javascript jquery html erb

【解决方案1】：

你应该修改

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

进入：

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

【讨论】：

我不认为这是我的代码运行不佳的问题

【解决方案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>

【讨论】：

谢谢它的工作，当我第一次在 jQuery 中处理 HTML 标签字符串时，我没想到“是问题，但我也想工作
"+data[i][j]+"
" 循环一次，我的意思是第二次循环，我不想工作我上面指出的部分，什么是最好的解决方案？
您可以做的另一项更改是使用 .html() 代替 .empty() + .append() 即 $("#buy_order").html(buy_order); 而不是 $("#buy_order").empty(); $("#buy_order").append(buy_order);

【解决方案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>

【讨论】：