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 での使用方法の概要を含む）
推薦する
Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました
CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...
Ubuntu 20.04 IPアドレスを変更する方法の例
例:本日、前回のオフィスコラボレーションプラットフォーム実験の続きをしていたところ、仮想マシンは以前...
メタタグを簡単に説明すると
META タグは、一般的に タグと呼ばれ、HTML Web ページのソース コード内の重要な HTM...
vue+elementUI で埋め込みテーブルを実装する方法の例
大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新し...
MySQLステートメントの記述と実行順序を理解するだけです
MySQL ステートメントの書き込み順序と実行順序には大きな違いがあります。書き順、mysql の一...
document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する
getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...
MySQL の完全バックアップ中に特定のライブラリを除外する方法
MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...
Linux での grep コマンドの使い方の詳細な説明
Linux grep コマンドLinux の grep コマンドは、ファイル内の条件を満たす文字列を...
MySQL グループ化クエリと集計関数
概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい（商品の価格帯を見つけるのに役立...
初心者でもjsのtypeofとinstanceofの違いを理解できます
目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...
Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。
序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...
this.parentNode.parentNode (親ノードの親ノード) はどういう意味ですか?
親ノードの親ノード、例えば、このような段落がありますHTML:コードをコピーコードは次のとおりです。...
オブジェクトのプロパティを反復処理する際の TypeScript の問題
目次1. 問題2. 解決策1. オブジェクトをanyとして宣言する2. オブジェクトのインターフェー...
更新とデータ整合性処理のためのMySQLトランザクション選択の説明
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
ウェブページ制作をマスターするために必要な6つのスキルのまとめ
ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...