2010年9月1日 星期三

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

這題目應該是學習jQuery表格操作的基本題。
image
題目相當簡單,
各個橫向列欄位相加,總和放到該橫列的最後一欄,
各個總向行欄位相加,總和放在該縱行的最後一欄,
而縱與橫的欄位相加,放在最右下方的欄位中。



結果要是這樣的,
image
因為對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的階層關係。

以上




沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言