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 での使用方法の概要を含む）
推薦する
CSS3 で translate と transition を使用する方法
translate と transition は非常に強力で、習得するのは不可能だといつも感じていま...
VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス
目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...
Nginx ロードバランシング クラスタの実装
（１）実験環境youxi1 192.168.5.101 ロードバランサーyouxi2 192.168...
WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)
目次1. 効果図（複数列） 2. 通常セレクター: mode = selector、複数列セレクター...
HTML フォームタグチュートリアル (4):
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
Linux の PHP に XML 拡張機能をインストールする詳細な手順
PHP Linux に XML 拡張機能をインストールする1. PHPインストールソースパッケージを...
MySQLリモート接続権限の詳細な説明
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
Docker 経由で CentOS コンテナを作成する手順
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
JavaScript における一般的な配列操作
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
CSS3 で作成された背景グラデーションアニメーション効果
成果を達成する 実装コードhtml <h1 class="text-light&qu...
Apache POIの基本的な使い方の詳しい説明
目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...
CSS3 を使用して楕円軌道の回転を実装するサンプルコード
最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...
MAC での MYSQL5.7.17 接続失敗の問題と解決策
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
W3C チュートリアル (2): W3C プログラム
W3C 標準化プロセスは 7 つの異なるステップに分かれています。 W3C 標準化プロセスは 7 つ...
Dockerfileを使用してDockerイメージを構築する
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...