テーブルを動的に読み込み、削除する 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 インストール不要版 設定方法図
推薦する
APPログインインターフェースシミュレーション要求を実装するためのPostmanデータ暗号化と復号化
目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...
検索ナビゲーションバー付きの CSS サンプルコード
この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。以下の...
Django は Pillow を使用して検証コード機能を簡単に設定します (Python)
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
TCP 3 回目のハンドシェイク データ転送プロセス図
RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...
MySQL でシンプルな検索エンジンを実装するためのサンプルコード
目次序文導入ngram全文パーサー全文インデックスを作成する検索方法1. 自然言語検索（自然言語モー...
MySQL ルート パスワードをリセットするときに発生する「不明な列 'password'」問題を解決する方法
夜にMACの電源を入れたところ、突然ルートアカウントがMySQLに正常にログインできなくなったため、...
JSコードコンパイラMonacoの使い方
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
Vue シンプル登録ページ + 確認コード送信機能の実装例
目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化（後述のブログを参照） 3. 一般...
WeChatアプレットの手動および自動追跡の実装の詳細説明（Taro）
どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...
HTML 5 プレビュー
<br />オリジナル: http://www.alistapart.com/artic...
CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。
コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...
VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析
3つのモードブリッジ（ブリッジ モード）、NAT（ネットワーク アドレス変換モード）、ホストオンリー...
MySQL SQL文を最適化するためのヒント
十分に最適化されていない、またはパフォーマンスが極端に低い SQL ステートメントに直面した場合、通...
CentOS仮想マシンの時刻を変更する方法
上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...
Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...