Как добавить несколько значений в JavaScript?

Question

у меня такая ситуация:

...
 for (var i = 0; i < json.length; i++)
 {
  output += '<tr>';
     for ( var objects in json[i])
     {
        if (objects == 'amt_1')
       {
         output += '<td id="amt">' + json[i][objects] + '</td>';
       }
      }
  output += '</tr>';
        }
     output += '<tr">';
     var amt = 0;
     $('#amt').each(function() {
        amt += $(this).text();
     });
     output += '<td>' + amt + '</td>';
     output += '</tr>';
  $('#details').append(output);

 }

это часть таблицы, которая дает мне что-то вроде этого:

<td id="amt">4.58</td>
<td id="amt">55.74</td>
<td id="amt">193.5</td>
<td></td>

и в последнем td я бы хотел сумму остальных из них с id = amt то, что у меня, кажется, не работает

есть идеи?

Thnaks

Answer 1

Проблема в том, что вы используете идентификаторы вместо классов, идентификаторы должны быть уникальными, поэтому javascript возвращает только 1 тд.Однако несколько элементов могут совместно использовать один и тот же класс.

Кроме того, jQuery не будет работать, поскольку элементы еще не добавлены в документ.

for (var i = 0; i < json.length; i++)
{
     output += '<tr>';
     for ( var objects in json[i])
     {
         if (objects == 'amt_1')
         {
             output += '<td class="amt">' + json[i][objects] + '</td>';
         }
      }
      output += '</tr>';
}
output += '<tr">';
$('#details').append(output); //Copied here, this will add the above elements 
                              //to the document subtree, which allows jquery 
                              //to search for them
output = ""; //Reset output
var amt = 0;
$('.amt').each(function() { //Changed to class selector
    amt += parseInt($(this).text());
});
output += '<td>' + amt + '</td>';
output += '</tr>';
$('#details').append(output); //Append result

Answer 2

Вы не можете иметь более одного элемента с одинаковым идентификатором на странице. $("#someId") всегда выбирает не более 1 элемента. Итак, ваша первая проблема в том, что у вас даже нет списка элементов. Вы можете решить это, используя class.

Как только вы решите проблему id, у вас возникнет проблема: вы пытаетесь добавить текст, как если бы он был числом. Сначала вы конвертируете текст в число за один цикл, затем снова просматриваете всю коллекцию и пытаетесь добавить текстовые числа. Просто получите общее количество за первый цикл. Вы будете добавлять числа вместо текста, и вам придется только итерировать свою коллекцию один раз.

Кроме того, вам не нужно повторять ключи объекта, просто получите свойство. Вы можете просто ссылаться на имущество напрямую: json[i].amt_1

Пока мы это делаем, давайте не будем создавать html-строку, а просто создадим элементы DOM напрямую. И воспользуйтесь $.each(), чтобы выполнить цикл.

var total = 0;
$.each(json, function (i, item) {
    var row  = $('<tr>').appendTo("#details");
    $("<td>").appendTo(row).addClass("amt").text(item.amt_1);
    total += item.amt_1;
});
var row = $("<tr>").appendTo("#details");
$("<td>").appendTo(row).text(total);

Answer 3

Как они сказали, вы должны использовать класс вместо id

output += '<td class="amt">' + json[i][objects] + '</td>';

Затем вы должны добавить вывод в DOM до вашего селектора jQuery, $ ('.amt ') , можно найти элементы

$('#details').append(output);  //<--append BEFORE you select the .amt elements
 var amt = 0;
 $('.amt').each(function() {
    amt += parseFloat($(this).html());  //parseFloat on the html
 });
output = '<tr">';  //<-- reset output here
 output += '<td>' + amt + '</td>';
 output += '</tr>';
$('#details').append(output);

Тем не менее было бы лучше просто сложить сумму в цикле for

var total = 0;

...

if (objects == 'amt_1')
   {
     var curAmt = json[i][objects];
     output += '<td class="amt">' + curAmt + '</td>';
     total += parseFloat(curAmt);
   }

...

output += '<td>' + total + '</td>';