jQuery和ContentEditable屬性

我有一個測試案例，我正在努力，我試圖動態更新總數，如果contenteditable單元格更改，總.sum單元格將更新總行數單元總計。jQuery和ContentEditable屬性

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

}); 

})();

來源

2013-03-02 pertrai1

你的問題是什麼？ – undefined 2013-03-02 02:13:19

我在玩contenteditable。添加td類的總和，將三列相加。但是如果我在第一個單元格中更改數字，我希望更改後更新var總單元格。那有意義嗎？ – pertrai1 2013-03-02 02:21:48

您可以收聽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()功能並改進您的代碼。

來源

2013-03-02 02:35:17 undefined

這很好，謝謝。我需要的一件事是爲列添加行列，以便在頁面加載時顯示。我會更多地查看這段代碼，看看我能做些什麼，以便將總計的單元格追加到每行中。再次感謝你。 – pertrai1 2013-03-02 15:57:10

jQuery和ContentEditable屬性

回答

相關問題