# 如何透過 jQuery 進行表格內容數據的垂直加總與水平加總

前幾天為了讓手下的工程師學習 [jQuery](http://jquery.com/) 物件操作，出了一個小題目給他們練習。我們有一個統計表同時包括「水平加總」與「垂直加總」兩個需求，且這兩個需求已經用 [ASP.NET MVC](http://asp.net/mvc) 開發完成了，都是在 View 中寫 C# 程式進行運算的，我的題目是要將運算的部分改用 [jQuery](http://jquery.com/) 動態算出。

如下圖例，就是我們的統計表格，標示紅框的部分就是要進行 [jQuery](http://jquery.com/) 運算的欄位，而這幾格分別都有分別標記 hTotal (水平統計) 與 vTotal (垂直統計) 類別。

![統計表格，標示紅框的部分就是要進行 jQuery 運算的欄位，而這幾格分別都有分別標記 hTotal (水平統計) 與 vTotal (垂直統計) 類別](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/981c66709dc01d607e97-image_3.png "統計表格，標示紅框的部分就是要進行 jQuery 運算的欄位，而這幾格分別都有分別標記 hTotal (水平統計) 與 vTotal (垂直統計) 類別")

而 這個表格的 HTML 如下：

```xml
<table id="tbStat" class="styletable">
	<thead>
	<tr>
		<td>日期</td>
		<td>選項1</td>
		<td>選項2</td>
		<td>選項3</td>
		<td>選項4</td>
		<td>參加<br />人數</td>
	</tr>
	</thead>
	<tbody>
	
	<tr>
		<td>2009/2/12</td>
		<td>42</td>
		<td>33</td>
		<td>60</td>
		<td>6</td>
		<th class="hTotal">0</th>
	</tr>
	
	<tr>
		<td>2009/2/11</td>
		<td>59</td>
		<td>50</td>
		<td>85</td>
		<td>14</td>
		<th class="hTotal">0</th>
	</tr>
	
	<tr>
		<td>2009/2/10</td>
		<td>74</td>
		<td>60</td>
		<td>127</td>
		<td>16</td>
		<th class="hTotal">0</th>
	</tr>
	
	<tr>
		<td>2009/2/9</td>
		<td>64</td>
		<td>61</td>
		<td>118</td>
		<td>17</td>
		<th class="hTotal">0</th>
	</tr>
	
	<tr>
		<th>加總：</th>
		<th class="vTotal">0</th>
		<th class="vTotal">0</th>
		<th class="vTotal">0</th>
		<th class="vTotal">0</th>
		<th class="vTotal">0</th>
	</tr>
	</tbody>
</table>
```

也許各位也可以試著練習看看你要花多少時間將這個需求做出來，考驗一下你對 [jQuery](http://jquery.com/) 的掌握度。

我自己實做這個需求大概花了約 5 分鐘時間用 [jQuery](http://jquery.com/) 語法寫出來，建議各位先不要看我寫的程式碼，先用自己的方式將此功能寫出來，寫完且驗證成功後，再來看看我的寫法。

我的程式碼如下：

```javascript
 $(function()
 {
	  $('.hTotal').each(function(i) {
		  var hTotal = 0;
		  $(this).parent().find('td:gt(0)')
			.each(function(i)
			{
				hTotal += parseInt($(this).text());
			});
		  $(this).text(hTotal);
	  });
	  
	  $('.vTotal').each(function(i) {
		  var vTotal = 0;
		  $(this).parent().parent()
			.find('td:nth-child(' + (i+2) +'),th:nth-child(' + (i+2) +')')
			.each(function(i)
			{
				vTotal += parseInt($(this).text());
			});
		  $(this).text(vTotal);
	  });
 });
```

這段程式碼分別以 $('.hTotal') 與 $('.vTotal') 開場，並且利用 parent() 與 find() 與 each() 與 nth-child 就可以運算出所有相關的儲存格內容，加總後再透過寫入儲存格內。

比較要提到的是計算 vTotal 欄位的部分，由於水平儲存格是套用 th 但其他欄位是套用 td，由於標籤不一樣，所以在使用 find() 的時候，必須指定兩次 Selector 並透過逗號分隔，才能同時取得兩個標籤的 find() 結果。

備註：以下是使用 [jsFiddle](http://jsfiddle.net/) 的執行預覽： [http://www.jsfiddle.net/pBcng/](http://www.jsfiddle.net/pBcng/)

最後，我要特別推薦由[黑暗執行緒](http://blog.darkthread.net/)站長 Jeffrey 所親自操刀錄製的 [邊做邊學 jQuery 教學影片系列](https://www.youtube.com/playlist?list=PLpRG_zGZAavj3aztURYe_Sq286-Sl8PtR)，這一系列的教學影片有非常鞭辟入裡的技術解說，相信看了這些影片後不只可以讓你對 [jQuery](http://jquery.com/) 有更深一層的認識，更能讓你**精通 jQuery** 所有重要觀念！

**相關連結**

-   [jQuery: The Write Less, Do More, JavaScript Library](http://jquery.com/)
-   [Visual jQuery 1.2.6](http://visualjquery.com/)
-   [邊做邊學 jQuery 教學影片系列](http://msdn.microsoft.com/zh-tw/asp.net/dd310332.aspx#jQuery)