Динамическое добавление столбцов в таблицу jQuery не работает
Я пытаюсь сгенерировать и добавить столбцы в таблицу динамически с помощью 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%"> </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+"%")+" "+"</div>"+data[i][j]+"</div>";
buy_order += "</td>\n";
}
buy_order += "</tr>\n";
console.info(buy_order)
}
buy_order=$(buy_order).hide().fadeIn(1000);
$("#buy_order").empty();
$("#buy_order").append(buy_order);
});
});
},5000);
});
</script>
благодарить
он может быть изменен или без изменений
Не могли бы вы изменить свой полный JSON. Также вы можете изменить формат JSON?
Я могу, но какую структуру JSON вы хотите, чтобы я предоставил? это как {["цена", 0,003, "сумма": 1]}
Что вы можете сделать, так это создать массив, который дает следующий результат. ([0] => {"price" => 0,003, "amount" => 1}, [1] => {"price" => 0,006, "amount" => 2})
Что-то вроде этого с ключом и значением в виде массива. Если вы можете создать этот формат в JSON, вы можете просто показать значение, не используя два цикла for. :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вы должны изменить
$("#buy_order").append(buy_order);
в:
$("#buy_order").find("tbody").append(buy_order);
Не думаю, что проблема в том, что мой код плохо работает
Попробуйте это -
<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+"%;' </div>"+data[i][j]+"</div>";
buy_order += "</td>\n";
}
buy_order += "</tr>\n";
console.info(buy_order)
}
buy_order=$(buy_order).hide().fadeIn(1000);
$("#buy_order").empty();
$("#buy_order").append(buy_order);
});
});
},5000);
});
</script>
Спасибо, это сработало, я не ожидал, что проблема "была", когда я впервые обработал строку HTML-тегов в jQuery, но я также хочу работать <div class = 'parent'> <div class = 'overlay bg-success 'style =' width: "+ width +"%; '& nbsp; </div> "+ data [i] [j] +" </div> "один раз в цикле, я имею в виду второй раз цикла, я не хочу работать с той частью, которую я указал выше, какое для этого лучшее решение?
Еще одно изменение, которое вы могли бы сделать, - использовать .html () вместо .empty () + .append (), то есть $("#buy_order").html(buy_order); вместо $("#buy_order").empty(); $("#buy_order").append(buy_order);.
Проверь это.
$(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.info(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%"> </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%"> </div>
0.003
</div>
</td>
<td class = "table-default">1</td>
</tr>
</tbody>
</table>
Ответ этого json-ответа [["0.003", 1]] исправлен или будут изменения?