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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Vue における ref と $refs の紹介と使用例
>>: テンプレートタグの使用方法の詳細な説明（Vue での使用方法の概要を含む）
推薦する
ショートビデオ（Douyin）の透かし除去ツールの実装コード
目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...
ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード
序文：私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
Reactは一般的なスケルトン画面コンポーネントの例を実装します
目次スケルトンスクリーンとは何ですか？デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...
CSS変数var()の使い方を理解する必要があります
Web プロジェクトがどんどん大きくなると、CSS は天文学的な大きさと複雑さを増します。この問題を...
MySQLでSQLクエリ文がどのように実行されるかを分析する
目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...
ログインフォームを実装するためのReactサンプルコード
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
Better-scrollはメニューとコンテンツをリンクする効果を実現します
1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...
vue シンプルメモ帳開発の詳しい説明
この記事では、参考までにEasy Notepadを実装するためのVueの具体的なコードを紹介します。...
1つの記事でJavaScriptのクロージャ関数について学ぶ
目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...
MySQLのネクストキーロックのロック範囲についての簡単な説明
序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...
CSS スタイルをプログラムで処理するためのサンプル コード
プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...
Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習
目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...
Linux で SVN サーバーをインストールする方法
1. Yumのインストール yum でサブバージョンをインストール 2. 構成1. 倉庫を作る/ho...
Web開発でボックスを中央に配置するいくつかの方法
1. ボックスを中央に配置するいくつかの方法を記録します。 1.0、マージン幅固定、高さ中央配置。 ...
Vue vee-validateプラグインの簡単な使い方
目次1. インストール2. インポート3. 検証ルールを定義します（エクスポート用に js ファイル...