JavaScript：動態生成表格併計算列總和

本文檔旨在指導初學者使用JavaScript 動態生成HTML 表格，併計算每列的總和，最後將總和添加到表格的底部作為新的一行。通過本文，你將學習如何使用JavaScript 操作DOM 元素，創建表格，以及進行簡單的數值計算。

動態生成表格併計算列總和

在Web 開發中，經常需要動態生成表格並進行一些計算。本教程將演示如何使用JavaScript 創建一個表格，該表格根據用戶輸入的數字，計算該數字的平方和階乘，並將結果顯示在表格中。最後，我們還將計算每列的總和，並將其添加到表格的底部。

1. HTML 結構

首先，我們需要在HTML 中創建一個輸入框、一個按鈕和一個用於顯示結果的div 元素：

 <input id="broj" type="text">
<button onclick="tablica()">生成表格</button>
<div id="rezultat"></div>

2. JavaScript 代碼

接下來，我們將編寫JavaScript 代碼來實現表格的生成和計算。

 function tablica() {
    var sum1 = 0, sum2 = 0, sum3 = 0; // 初始化列總和var nr = document.getElementById("broj").value; // 獲取用戶輸入的數字// 輸入驗證if (nr <tr>
<th>N</th>
<th>N²</th>
<th>N!</th>
</tr>";
    var faktorijela = 1; // 初始化階乘// 循環生成表格行for (var i = 1; i <td>" val1 "</td><td>" val2 "</td><td>" val3 "</td>";

        // 累加列總和sum1 = sum1 val1;
        sum2 = sum2 val2;
        sum3 = sum3 val3;
    }

    // 添加總和行rez = rez "<tr>
<td>" sum1 "</td>
<td>" sum2 "</td>
<td>" sum3 "</td>
</tr>";

    rez = rez "";

    // 將表格顯示在頁面上var rezTablica = document.getElementById("rezultat");
    rezTablica.innerHTML = rez;
}

代碼解釋:

1. 初始化變量:
   • sum1, sum2, sum3: 用於存儲每一列的總和，初始值為0。
   • nr: 獲取用戶在輸入框中輸入的數字。
   • rez: 用於構建HTML 表格字符串。
   • faktorijela: 用於計算階乘，初始值為1。
2. 輸入驗證:檢查用戶輸入是否小於2。如果小於2，則顯示錯誤消息並結束函數執行。
3. 創建表格頭部:使用HTML 字符串創建表格的頭部，包含"N", "N²", "N!" 三列。
4. 循環生成表格行:
   • 使用for 循環從1 迭代到用戶輸入的數字nr。
   • 在每次迭代中，計算當前數字的平方(i * i) 和階乘(faktorijela = faktorijela * i)。
   • 使用HTML 字符串創建表格的一行，包含當前數字、平方和階乘。
   • 將該行添加到rez 字符串中。
   • 將當前行的三個值分別累加到sum1, sum2, sum3 中。
5. 添加總和行:在循環結束後，使用HTML 字符串創建表格的最後一行，包含每一列的總和。
6. 顯示表格:將完整的HTML 表格字符串賦值給rezultat div 的innerHTML 屬性，從而在頁面上顯示表格。

3. 運行結果

當用戶在輸入框中輸入一個數字（例如5）並點擊“生成表格”按鈕後，頁面將顯示一個包含5 行數據的表格，並且在表格底部會有一行顯示每一列的總和。

4. 注意事項

• 數據類型:請確保用戶輸入的是數字，可以使用parseInt() 或parseFloat() 函數將輸入框中的值轉換為數字。
• 錯誤處理:可以添加更多的錯誤處理機制，例如檢查用戶是否輸入了非數字字符。
• 樣式美化:可以使用CSS 來美化表格的樣式。
• 代碼復用:可以將生成表格的邏輯封裝成一個獨立的函數，方便在其他地方調用。

5. 總結

通過本教程，你學習瞭如何使用JavaScript 動態生成HTML 表格，併計算每列的總和。這只是一個簡單的示例，你可以根據實際需求進行擴展和修改。希望本教程對你有所幫助！

以上是JavaScript：動態生成表格併計算列總和的詳細內容。更多資訊請關注PHP中文網其他相關文章！