テーブルを動的に読み込み、削除する JavaScript
|
この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
テーブル {
マージン: 100px 自動;
幅: 500ピクセル;
境界線の折りたたみ: 折りたたみ;
}
番目 {
境界線: 1px の灰色
背景色: ライトグレー;
高さ: 30px;
}
td {
テキスト配置: 中央;
境界線: 1px の灰色
}
</スタイル>
</head>
<本文>
<テーブル>
<頭>
<th>名前</th>
<th>件名</th>
<th>結果</th>
<th>オペレーション</th>
</thead>
<t本文>
</tbody>
</テーブル>
<スクリプト>
var tbd = document.querySelector('tbody');
var 情報 = [{
名前: 'キャシー',
件名: "javascript",
スコア: 60
}, {
名前: 「ミラ」
件名: "java",
スコア: 100
}, {
名前: 'キキ',
件名:「python」、
スコア: 80
}, {
名前: 'リンダ',
件名: "jquery",
スコア: 70
}]
var info_list = [];
(var i = 0; i < info.length; i++) の場合 {
console.log(info[i]['件名']);
var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['subject'] + "</td>" + "<td>" + info[i]['score'] + "</td>" + "<td><a href = javascript:;>削除</a></td>" + "</tr>";
info_list.push(str);
}
tbd.innerHTML = info_list.join('');
var deletes = document.querySelectorAll('a');
(var i = 0; i < deletes.length; i++) {
削除[i].onclick = 関数() {
親ノードを削除します。
}
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図
推薦する
Dockerコンテナのセルフスタートを実装する方法
コンテナの自動起動Docker は、コンテナが終了したとき、または Docker が再起動されたとき...
Vueは3段階のナビゲーション表示と非表示を実装します
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
VueはBaidu Mapsを使用して都市の位置特定を実現
この記事では、参考までに、Baidu Mapsを使用して都市の位置特定を実現するVueの具体的なコー...
16進カラーコード（完全版）
赤とピンク、およびそれらの 16 進コード。 ＃990033 #CC6699 #FF6699 #FF...
複数レベルの複雑な動的ヘッダーの avue-crud 実装例
目次序文バックグラウンドデータの結合フロントエンドデータ表示ページ効果表示Avue.js は、既存の...
Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します
第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...
VUEのデータプロキシとイベントの詳細な説明
目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...
Vueカスタム命令の詳細な説明
目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...
Vueはボールのスライディングクロス効果を実現します
この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...
Ubuntu環境でxdebugをコンパイルしてインストールする方法
この記事では、Ubuntu 環境で xdebug をコンパイルしてインストールする方法について説明し...
Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています
目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...
JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード
シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...
入力タイプの制限（複数の方法）
1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...
WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。
WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...
Vue.jsはカレンダー機能を実装します
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...