如何在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);