如何使用JavaScript對表格進行求和

隨著網路的發展，越來越多的網站需要使用表格來展示資料。而在表格中，求和是一個非常基礎的操作。在 JavaScript 中，我們可以使用循環來實現表格求和功能。本篇文章將介紹如何使用 JavaScript 對表格進行求和。

HTML 表格結構

在介紹如何對表格進行求和之前，我們先來了解一下 HTML 中的表格結構。

姓名	年齡	成績
小明	18	85
小紅	19	90
小剛	20	80

#如上圖所示，一個基本的HTML 表格由table、thead、tbody、 tr、th 和td 等元素構成。

其中，table 表示整個表格，thead 表示表頭，tbody 表示表身，tr 表示一行數據，th 表示表頭單元格，td 表示資料單元格。

JavaScript 表格求和實作

接下來，我們將介紹如何使用 JavaScript 實作表格求和功能。

首先，我們要找到表格中需要進行求和的資料儲存格。在上面的例子中，我們需要對成績進行求和。我們可以使用以下的程式碼來取得成績單元格：

const scores = document.querySelectorAll('table tbody tr td:nth-child(3)');

#在上面的程式碼中，querySelectorAll 函數可以取得所有表格中的td 元素。其中，:nth-child(3) 表示取到每一行的第三個 td 元素，即成績單元格。

接著，我們需要遍歷所獲得的成績單元格，將每個數值都累積起來。程式碼如下：

let sum = 0;
scores.forEach((score) => {
 sum = Number(score.innerText);
});

在上面的程式碼中，我們使用了forEach 函數，遍歷了所有成績單元格，並將每個值都累積到了sum 變數中。需要注意的是，由於 innerText 會傳回字串類型的值，所以需要使用 Number 函數將其轉換為數字類型。

最後，我們只需要將 sum 的值顯示在頁面上。程式碼如下：

const result = document.createElement('div');
result.innerText = 總分：${sum};
#document.body.append (result);

透過以上程式碼，我們就可以實現表格中指定列的求和功能了。

總結

本篇文章介紹如何使用JavaScript 對HTML表格進行求和操作，透過尋找需要求和的元素，使用遍歷及累加操作，最後在頁面上顯示計算結果，實現了簡單求和操作。

表格的操作是網頁開發中不可或缺的一部分，掌握此方面的知識對於提高開發效率至關重要。本篇文章所介紹的內容可以幫助讀者更深入了解 JavaScript 在表格資料處理方面的應用，也有助於讀者深入了解 JavaScript 開發的優秀實踐思路，從而更好地開發出優秀應用。

以上是如何使用JavaScript對表格進行求和的詳細內容。更多資訊請關注PHP中文網其他相關文章！