javascriptで複数の値を追加するには？

Question

私はこのような状況を持っている：

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

と私はそれらの残りの部分の総和をしたいと思い、最後td中：

... 
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); 

} 

これは与えることは私にこのようなものだテーブルの一部でありますid = amt 私は何をしていないようです

アイデア？

Thnaks

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

彼らはあなたが次にあなたが、あなたのjQueryのセレクタの前にDOM に$を出力を追加する必要があります代わりにID

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

のクラスを使用する必要があります言ったように（ '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ループの額を合計すると良いでしょう

ページ上に同じIDを持つ複数の要素を持つことはできません

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

。 $("#someId")は常に最大で1つの要素を選択します。だから、あなたの最初の問題は、要素のリストさえ持っていないということです。代わりにclassを使用して解決できます。

id問題を解決したら、数字であるかのようにテキストを追加しようとしています。まず、テキストを1つのループ内の数字に変換してから、コレクション全体を再びループして、テキスト番号を追加しようとします。最初のループの間に合計を取得するだけです。テキストの代わりに数字を追加するので、コレクションを1回だけ繰り返す必要があります。

また、オブジェクトのキーを繰り返してプロパティを取得する必要はありません。あなただけのプロパティを直接参照することができます。私たちはそれでいる間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);