jQuery練習題 - 表格列與行的各欄位相加

這題目應該是學習jQuery表格操作的基本題。

題目相當簡單，
各個橫向列欄位相加，總和放到該橫列的最後一欄，
各個總向行欄位相加，總和放在該縱行的最後一欄，
而縱與橫的欄位相加，放在最右下方的欄位中。



結果要是這樣的，

因為對jQuery不是很上手，所以一開始會用一般javascript的迴圈方式來去設計出執行結果的程式碼，
但是基於要好好認識、善用jQuery的功能操作，所以還是用jQuery的語法來解決。
大約想了一下，寫出了以下還能執行出結果的程式。

   1: <script type="text/javascript">

   2:     $(document).ready(function ()

   3:     {

   4:         var columnCount = $("#table1 tr:eq(1) td:not(:first)").length;

   5:         var ColumnArray = new Array(columnCount);

   6:         $(ColumnArray).each(function (i) { ColumnArray[i] = 0; });

   7:  

   8:         $("#table1 tr:gt(0):not(:last)").each(function ()

   9:         {

  10:             var rowSummary = 0;

  11:  

  12:             $(this).find("td:gt(0):not(:last)").each(function (index)

  13:             {

  14:                 rowSummary += parseInt($(this).text());

  15:                 ColumnArray[index] += parseInt($.trim($(this).text()));

  16:             });

  17:  

  18:             $(this).find("td:last").text(rowSummary);

  19:             ColumnArray[parseInt(columnCount - 1)] += rowSummary;

  20:         });

  21:  

  22:         $("#table1 tr:last td:not(:first)").each(function (index)

  23:         {

  24:             $(this).text(ColumnArray[index]);

  25:         });

  26:     });

  27: </script>

要知道如何使用 selector 與 filter，然後了解DOM的階層關係。

以上

---

---