JavaScript - テーブルの自動集計を実装する方法

Question

＃＃＃22＃＃＃ ＃＃＃合計＃＃＃ リーリー 1 ページにこのようなテーブルが多数あり、カウントする必要があります Q_Q

3

0

0

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

返事

全員に返信(3)

返信します 近い

为情所困2017-07-01 09:13:59 3棟

あなたが書いた HTML 構造に注意して thead却没有写body、次のように変更してください:

リーリー

このうち、thead和tbody和tfoot都分开，thead为表头不遍历，tbody为遍历部分，tfootはjQueryセレクターを使いやすくするためのまとめ部分です。

リーリー

アップデート

ここにいくつかの知識ポイントがあります:

1. new Array()新しい配列を構築します

2. .fill()配列を埋める

3. セレクターの使い方:not()和:first-child

4. 強制的に数値に変換するには、文字列または数値の前に+を追加します

5. 代入演算子の使用法+=

いいねを押す +0

返信を追加 关闭回复

黄舟

返事

某草草2017-07-01 09:13:59 2棟

HTMLコードを理解できると幸いです
リーリー

jsコード

リーリー

いいねを押す +0

返信を追加 关闭回复

黄舟

返事

世界只因有你2017-07-01 09:13:59 1棟

jquery はそれぞれの列を走査し、それらを合計して最後の行に配置します

いいねを押す +0

返信を追加 关闭回复

黄舟

返事

人気のトピック

詳細>

• CakePHP チュートリアル
• Laravel チュートリアル
• PHP チュートリアル
• Java チュートリアル

人気の記事

• IntelMarkets (INTL) プレセール: 暗号通貨分野を支配する有利な投資機会
• ビットコイン ブーム: 明らかになった洞察とその予期せぬ波及効果
• Call Of Duty: Black Ops 6 - ベスト LR 7.62 ロードアウト
• パーセンテージを使用して表のセルの最大幅を設定する方法
• ObjectAid UML Explorer は Java コードの視覚化と文書化にどのように役立ちますか?

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1419907
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4262274
• 
  JAVA 初心者向けビデオチュートリアル

  2503034

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1419907
• 
  JAVA 初心者向けビデオチュートリアル

  2503034
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  505240
• 
  Web フロントエンド開発の簡単な紹介

  215504
• 
  PSビデオチュートリアルをゼロからマスターする

  883712

• 
  [Web フロントエンド] Node.js クイック スタート

  6970
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5411
• 
  Go言語実践GraphQL

  4561
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  659
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  23007

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [ブートストラップ テンプレート] 有機果物と野菜のサプライヤー Web テンプレート Bootstrap5
• [バックエンドテンプレート] Bootstrap3 多機能データ情報バックグラウンド管理レスポンシブ Web ページ テンプレート-Novus
• [ブートストラップ テンプレート] 不動産リソース サービス プラットフォーム Web ページ テンプレート Bootstrap5
• [ブートストラップ テンプレート] シンプルな履歴書情報 Web テンプレート Bootstrap4
• [ブートストラップ テンプレート] ブートストラップ レスポンシブ ワイドスクリーン ブック教育 Web サイト テンプレート-DREAMLIFE
• [バックエンドテンプレート] MAC スタイルのレスポンシブ ブルー エンタープライズ CMS バックグラウンド管理システム テンプレート
• [バックエンドテンプレート] レスポンシブなグラデーション雰囲気の背景管理システムのウェブサイトのテンプレート-usinessbox
• [ブートストラップ テンプレート] レスポンシブな野菜と果物の店のウェブサイト テンプレート-Organio

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved

ID	フィールド 1	フィールド 2	フィールド 3	フィールド 4
1	11	12	13	14
2	26	28	27
				フロントエンドを学んだところです。JQ を使用して各列を合計に自動的に加算する方法を知っている人はいますか?

Answer 1

あなたが書いた HTML 構造に注意して thead却没有写body、次のように変更してください:

リーリー

このうち、thead和tbody和tfoot都分开，thead为表头不遍历，tbody为遍历部分，tfootはjQueryセレクターを使いやすくするためのまとめ部分です。

リーリー

アップデート

ここにいくつかの知識ポイントがあります:

1. new Array()新しい配列を構築します

2. .fill()配列を埋める

3. セレクターの使い方:not()和:first-child

4. 強制的に数値に変換するには、文字列または数値の前に+を追加します

5. 代入演算子の使用法+=

Answer 2

HTMLコードを理解できると幸いです
リーリー

jsコード

リーリー

Answer 3

jquery はそれぞれの列を走査し、それらを合計して最後の行に配置します