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 での使用方法の概要を含む）
推薦する
H5 WeChatパブリックアカウント認証を実装するための簡単な手順
序文昨日、h5 WeChat認証の実装が必要なプロジェクトがありました。したがって、この機能を完了す...
MySQL における or、in、union、インデックス最適化の詳細な分析
この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...
ブラウザ内でHTMLタグを中央に配置するCSSスタイル
CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...
MySql のスロークエリ分析とスロークエリログの開き方の詳細説明
最近はMySQLのパフォーマンス最適化についても研究しているので、今日の投稿は勉強ノートとしても使え...
Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例
目次質問： 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
ウェブ理論: 考えさせない読書ノート
第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...
Nodejs で WeChat アカウント分割を実装するためのサンプルコード
会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...
HTML（divレイヤー）を介してFLASHにリンクを追加するための実装コード
今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...
Centos 7 64 ビット デスクトップ バージョンのインストール グラフィック チュートリアル
システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...
JavaScript で配列遅延評価ライブラリを実装する方法
目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...
cocoscreatorプレハブの詳しい説明
目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...
ユーザーエクスペリエンスの構築
<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...
HTMLは無効なテーブル幅設定の問題を解決します
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
タイプファイルの入力ボタン機能の研究
<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...
jsは多次元配列を1次元配列に変換し、それを並べ替えます
目次まず多次元配列の平坦化についてお話しましょう方法 1: flat()方法 2: 空の文字列を連結...