如何在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其余的總和，我似乎不起作用

有任何想法嗎？

惡作劇

Answer 1

問題是您使用的是id而不是類，id應該是唯一的，因此javascript僅返回1 td。 但是，多個元素可以共享同一類。

而且，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

就像他們說的那樣，您應該使用類而不是ID

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

然后，必須在 jQuery選擇器$（'。amt'）找到元素之前將輸出添加到DOM 。

$('#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>';

Answer 3

一個頁面上不能有多個具有相同ID的元素。 $("#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);