jsは動的にテーブルを生成します（ノード操作）

jsは動的にテーブルを生成します（ノード操作）

この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

DOM ノード操作の場合、この場合の効果図は次のようになります (コード量は多くないため、構造と動作の分離はありません)。

ネイティブ js 実装 (メソッドはコメントで説明されています):

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="utf-8">
 <タイトル></タイトル>
 <スタイル タイプ="text/css">
 テーブル {
 幅: 500ピクセル;
 マージン: 100px 自動;
 境界線の折りたたみ: 折りたたみ;
 テキスト配置: 中央;
 }

 td、
 番目 {
 境界線: 1px 実線 #333;
 }

 スレッドtr {
 高さ: 40px;
 背景色: #ccc;
 }
 </スタイル>
 </head>
 <本文>
 <テーブルセル間隔="0">
 <頭>
 <tr>
  <th>名前</th>
  <th>件名</th>
  <th>結果</th>
  <th>オペレーション</th>
 </tr>
 </thead>
 <t本文>
 </tbody>
 </テーブル>
 </本文>
 <script type="text/javascript">
 // 学生データは動的であるため、動的に生成するには js が必要です。ここでは、データをシミュレートし、自分でデータを定義する必要があります。 // データはオブジェクトの形式で保存します。 //1 最初に学生データを準備します。 //2 すべてのデータが tbody に格納されます (人数、行数)
 varデータ = [{
 名前: 劉淑心
 件名: 'JavaScript'、
 スコア: '100'
 }, {
 名前: 'Song Xianglong'、
 件名: 'JavaScript'、
 スコア: '80'
 },
 {
 名前: 'Cui Jian'、
 件名: 'JavaScript'、
 スコア: '90'
 },
 {
 名前: 'Qie Haimiao'、
 件名: 'JavaScript'、
 スコア: '70'
 }
 ];
 //console.log(データの長さ);
 var tbody = document.querySelector('tbody');
 (var i = 0; i < datas.length; i++) の場合 {
 //行を作成する trs = document.createElement('tr');
 tbody.appendChild(trs);
 //作成されるセルの数は各オブジェクトの属性の数によって異なります for(var k in datas[i]){
 //セルを作成します var td = document.createElement('td');
 //オブジェクト内の属性値をtdに渡す
 //console.log(データ[i][k]);
 td.innerHTML=データ[i][k];
 trs.appendChild(td);
 }
 
 //セルを削除する操作を作成します。var td = document.createElement('td');
 td.innerHTML='<a href="javascript:;" rel="external nofollow" >削除</a>'
 trs.appendChild(td);
 }
 //削除操作 var a=document.querySelectorAll('a');
 for(var i=0;i<a.length;i++){
 a[i].onclick=関数(){
 tbody.removeChild(this.parentNode.parentNode);
 }
 }
 </スクリプト>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js で動的なテーブルを生成し、各セルにクリック イベントを追加する方法
  • JS による HTML テーブルを動的に生成する方法の分析
  • JSは動的にテーブルを生成し、テーブルデータをバックエンドに送信します。
  • JS を使用して Web ページ上で任意の数の行と列を持つテーブルを動的に生成する方法
  • jsは指定された行数のテーブルを動的に生成します
  • コンテンツに基づいてテーブルを自動的に生成するjsで実装された関数
  • JavaScriptコードに基づいてテーブルを自動生成する
  • js+xmlを使用してテーブルを自動的に生成する
  • ボタンを使用してJavascriptをトリガーし、テーブルコードを動的に生成します。
  • Nodejsはネットワークデータを取得し、Excelテーブルを生成します

<<:  Vue における ref と $refs の紹介と使用例

>>:  テンプレートタグの使用方法の詳細な説明（Vue での使用方法の概要を含む）

推薦する

AES_ENCRYPT() と AES_DECRYPT() を使用して MySQL を暗号化および復号化する正しい方法の例

序文最近、仕事でAES_ENCRYPT()関数を使用してプレーンテキストを暗号化し、MySQL に保...

2018 年にリリースされる Apache Spark 2.4 の新機能は何ですか?

この記事は、2018 年 9 月 19 日に Adob​​e Systems Inc で開催された ...

Docker で複数の MySQL コンテナを作成して実行する方法の例

1. mysql/mysql-server:latestイメージを使用してMySQLインスタンスを素...

docker compose を使用して consul クラスタ環境を構築する例

領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...

HTML テーブルタグチュートリアル (35): 列間属性 COLSPAN

複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

Reactのref属性を深く理解する方法

目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

ウェブフォーム送信方法の詳細な概要

まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

HTML リスト ボックス、テキスト フィールド、ファイル フィールドのサンプル コード

ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...