jquery - jQuery & ContentEditable 属性

Question

contenteditableセルが変更された場合、合計を動的に更新しようとしているテストケースがあります。合計.sumセルは、行セルの合計から合計を更新します。

<table cellspacing="2">
 <tr>
  <td contenteditable="true">1</td>
  <td>2</td>
  <td>3</td>
 </tr>
</table>

以下は私のjQueryです

(function() {

 $( 'tr' ).each(function() {
  var sum = 0;

   $( 'td', this ).each(function() {
    var cellNum = $(this).text();
    sum += parseInt(cellNum, 10);
   });

   var total = '<td class="sum">' + sum + '</td>';

   $( this ).append(total);

 });

})();

Answer 1

blurまたはkeyupまたはinputイベントを聞くことができます。メソッドを使用すると、予期しない結果が得られます。つまり、最後の計算の結果が現在の結果に追加されます。各行 appendに別の結果を追加すると仮定しました。td

$('table').on('blur', 'td[contenteditable]', cal);

function cal() {
    $('tr').each(function () {
        var sum = 0;
        $('td:not(.total)', this).each(function () {
            var cellNum = $(this).text();
            sum += parseInt(cellNum, 10);
        });
        $('td.total', this).text(sum);
    });
}

http://jsfiddle.net/td5Hm/

数値以外の値を追加すると、合計値はNaN（数値ではない）値になることに注意してください。関数を使用isNaN()してコードを改善できます。