WordPress│テーブル内の数字を計算して合計を表示する方法

2022.09.292026.10.21

テーブルのtbodyの行数と、2列目の数値の合計を表示します。

複数の表でもIDを重複させず、表ごとに集計します。

旧例のPHPとscriptの混在、window.onloadの上書き、parseIntによる小数切り捨てを修正しました。

動く表示例

項目	値
A	10.25
B	20.50
C	-0.75

行数：未集計、合計：未集計

この例の行数は3、合計は30.00です。

JavaScript無効時は「未集計」のままになります。

表示後に行を追加・編集する機能は含みません。

HTMLを設置

変更前のブロックを保存してから、投稿のカスタムHTMLブロックに追加します。

1つのwaza-table-totals要素には、1つの表とその行数・合計の出力欄を入れます。

複数の表を置く場合は、この囲み要素ごと分け、表や囲み要素を入れ子にしないでください。

2列目は半角数字、先頭のマイナス、小数点以下2桁までを受け付けます。

カンマ区切り、円記号、空欄、セル結合は扱いません。

<div class="waza-table-totals">
<table><thead><tr><th>項目</th><th>値</th></tr></thead><tbody>
<tr><td>A</td><td>10.25</td></tr>
<tr><td>B</td><td>20.50</td></tr>
<tr><td>C</td><td>-0.75</td></tr>
</tbody></table>
<p>行数：<span class="waza-row-count">未集計</span>、合計：<span class="waza-total">未集計</span></p>
</div>

JavaScriptを1回だけ読み込む

以下を子テーマのJSファイルなどへ追加し、対象ページで読み込みます。

カスタムHTML内に設置する場合はscriptタグで囲みます。

すべての対象表のHTMLを先に置き、その後ろでスクリプトを1回読み込みます。

ページの読み込み後に追加した表や変更した値は、自動で再集計されません。

投稿権限やセキュリティ設定によってscriptが保存されない場合は、テーマ側の読み込みを使ってください。

PHP欄へJavaScriptだけを貼らないでください。

(() => {
  const run = () => document.querySelectorAll('.waza-table-totals').forEach(box => {
    const rows = box.querySelectorAll('tbody tr');
    const output = box.querySelector('.waza-total');
    const count = box.querySelector('.waza-row-count');
    if (!output || !count) return;
    let total = 0, valid = true;
    rows.forEach(row => {
      const cell = row.cells[1];
      const text = cell ? cell.textContent.trim() : '';
      if (!/^-?\d+(?:\.\d{1,2})?$/.test(text)) { valid = false; return; }
      const [whole, fraction = ''] = text.split('.');
      const cents = Number(whole + fraction.padEnd(2, '0'));
      if (!Number.isSafeInteger(cents) || !Number.isSafeInteger(total + cents)) { valid = false; return; }
      total += cents;
    });
    count.textContent = String(rows.length);
    const digits = Math.abs(total).toString().padStart(3, '0');
    const formatted = (total < 0 ? '-' : '') + digits.slice(0, -2) + '.' + digits.slice(-2);
    output.textContent = valid ? formatted : '集計できない値があります';
  });
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, {once:true});
  else run();
})();

入力条件と確認

入力文字列を整数部と小数部に分け、小数部を2桁にそろえてから整数へ変換します。小数のNumberに100を掛ける方法は、大きな値で変換時に誤差が出るため使いません。

各値を100倍の単位にした整数と、加算途中の合計が安全な整数範囲を超えた場合は集計エラーにします。1つの値の絶対値の上限は90071992547409.91です。最後に相殺される場合でも、途中で範囲を超えればエラーになります。表示も整数の文字列へ小数点を入れ、toFixedによる再変換を避けます。

会計処理や任意精度の計算を保証するものではありません。

見出し行は数えず、対象のtbodyの行を数えます。

正数・負数・小数、空の表、数値でない文字、複数の表で確認してください。

エラー値が1つでもある場合は合計の代わりにメッセージを出します。

元に戻すときは今回のHTMLとJavaScriptを取り除きます。

スマホ幅でテーブルの行数3と合計30.00を表示した実画面 — 2026年10月1日、幅390pxのブラウザーで確認した計算例。

まとめと参考資料

2026年10月21日、旧コードで90071992547409.90が90071992547409.91と表示されることを再現し、文字列から整数へ変換する処理と表示処理を修正しました。掲載コードとこのページの動く見本は同じ処理です。小数2桁までという入力条件と安全な整数範囲の制限は残ります。

よくある質問：WordPressでテーブル内の数字を計算して合計を表示するとき

この方法では、何を集計しますか？

記事では、テーブルのtbodyの行数と、2列目の数値の合計を表示します。複数の表でもIDを重複させず、表ごとに集計します。見出し行は数えず、対象のtbodyの行を数えます。

2列目には、どんな値を入れられますか？

記事では、2列目は半角数字、先頭のマイナス、小数点以下2桁までを受け付けます。カンマ区切り、円記号、空欄、セル結合は扱いません。

小数の計算は、正確ですか？

文字列の整数部と小数部から100倍の単位の整数を作り、安全な整数範囲で加算します。表示時も整数の文字列に小数点を入れます。各値や途中の合計が範囲を超えればエラーになり、会計処理や任意精度の計算を保証するものではありません。

数値でないセルがあると、どうなりますか？

記事では、エラー値が1つでもある場合は、合計の代わりにメッセージを出します。

HTMLは、どう設置しますか？

記事では、変更前のブロックを保存してから、投稿のカスタムHTMLブロックに追加します。1つのwaza-table-totals要素には、1つの表とその行数・合計の出力欄を入れます。複数の表を置く場合は、この囲み要素ごと分け、表や囲み要素を入れ子にしません。

JavaScriptは、どこに読み込みますか？

記事では、子テーマのJSファイルなどへ追加し、対象ページで読み込みます。カスタムHTML内に設置する場合はscriptタグで囲みます。すべての対象表のHTMLを先に置き、その後ろでスクリプトを1回読み込みます。投稿権限やセキュリティ設定でscriptが保存されない場合は、テーマ側の読み込みを使います。PHP欄へJavaScriptだけを貼りません。