JavaScriptを使用してテーブルを合計する方法

インターネットの発展に伴い、テーブルを使用してデータを表示する必要がある Web サイトがますます増えています。テーブルでは、合計は非常に基本的な操作です。 JavaScript では、ループを使用してテーブル合計機能を実装できます。この記事では、JavaScript を使用してテーブルを合計する方法について説明します。

HTML テーブル構造

テーブルを合計する方法を紹介する前に、まず HTML のテーブル構造を理解しましょう。

#名前年齢実績小明1885小红1990Xiaogang2080上記のように、基本的な HTML テーブルは、table、thead、tbody、It で構成されます。 tr、th、tdなどの要素で構成されます。

このうち、tableはテーブル全体、theadはヘッダー、tbodyはテーブル本体、trはデータ行、thはヘッダーセル、tdはデータセルを表します。

JavaScript テーブル集計の実装

次に、JavaScript を使用してテーブル集計機能を実装する方法を紹介します。

まず、テーブル内で合計する必要があるデータ セルを見つける必要があります。上の例では、成績を合計する必要があります。次のコードを使用してスコア セルを取得できます:

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

上記のコードでは, querySelectorAll関数は全てのテーブルのtd要素を取得できます。このうち、:nth-child(3) は各行の 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 (結果);

上記のコードを通じて、テーブル内の指定された列の sum 関数を実装できます。

概要

この記事では、JavaScript を使用して HTML テーブルで合計演算を実行する方法を紹介します。これには、合計する必要がある要素を見つけ、走査および累積演算を使用して、最後に計算結果をテーブルに表示します。その結果、単純な合計演算が実装されます。

テーブルの操作は Web 開発の重要な部分であり、この知識を習得することは開発効率を向上させるために非常に重要です。この記事で紹介する内容は、読者が表形式データ処理における JavaScript の応用をより深く理解するのに役立ちます。また、優れたアプリケーションをより良く開発するために、読者が JavaScript 開発の優れた実践的なアイデアをより深く理解するのにも役立ちます。

以上がJavaScriptを使用してテーブルを合計する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。