テーブルを動的に読み込み、削除する 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 インストール不要版 設定方法図
推薦する
Mysql 8.0.18 ハッシュ結合テスト (推奨)
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
vue-cli4.5.xはプロジェクトを素早く構築します
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
CSS でフッターの「下部吸収」効果を実現
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析
実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...
CentOS SVN サーバーで複数のプロジェクトを管理する方法
一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...
JavaScript プロトタイプとプロトタイプチェーンの詳細
目次1. プロトタイプ（明示的なプロトタイプ） 2. __proto__ (暗黙のプロトタイプ) 3...
本番環境でのMySQLパラメータsql_safe_updatesの使用に関する詳細な説明
序文アプリケーションのバグや DBA の誤操作が発生した場合、テーブル全体が更新される可能性がありま...
重複したMySQLテーブルをマージして削除する簡単な方法
シナリオ：クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...
Linux (Ubuntu) ユーザーがログイン時に N 回連続して間違ったパスワードを入力すると、システムは自動的に X 分間ロックされます。
1. PAM設定ファイルを編集する sudo vim /etc/pam.d/ログイン2行目に以下を...
WindowsでiTunesのバックアップパスを変更する方法
0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...
Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策
この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...
Linux システムで TCP 接続を作成するプロセスの紹介
目次LinuxでTCPを作成する手順サーバクライアントTCP確立プロセスサンプルコードLinuxでT...
Vue2.x における双方向バインディングの原理と実装
目次1. 実施プロセス2. オブザーバーを表示する3. ウォッチャーを実装する4. コンパイルを実装...
Docker を使用して開発環境を構築する方法 (Windows および Mac)
目次1. Dockerを使用する利点2. Dockerをインストールする1) LinuxにDocke...