テーブルを動的に読み込み、削除する 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 インストール不要版 設定方法図
推薦する
JavaScript 即時実行関数の使用状況分析
一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...
CSS スタイルを HTML 外部スタイルシートにインポートする方法
リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...
データベース内のSQL整合性制約ステートメントの分析
整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...
フォーム要素の垂直方向の中央揃えに最適なソリューション
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
jsはreduceメソッドを使用してコードをよりエレガントにします
序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...
新しい ECMAscript オブジェクト機能の紹介
目次1. オブジェクトのプロパティ1.1 属性表記2. プロパティ名を計算する3.オブジェクトメソッ...
Nginx メモリプールのソースコード分析
目次メモリプールの概要1. nginxデータ構造2. nginxはOSからスペースngx_creat...
Linuxテキスト処理ツールの詳細な説明
1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...
Dockerは複数のポートマッピングコマンドを有効にします
次のように： docker run -d -p 5000:23 -p 5001:22 --name ...
Linuxで環境変数を削除する詳細な手順
Linuxで環境変数を削除するには？unsetコマンドを使用してすぐに削除します1. Linuxクラ...
Vue を使用した Amap アプリケーション開発のベスト プラクティス
目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...
Reactを使用して画像認識アプリを実装する方法
まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...
CocosCreator 入門チュートリアル: TS で初めてのゲームを作る
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
Flask アプリケーションの Docker デプロイ実装手順
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
HTML ページ スタイルの !-- -- の機能は何ですか?
主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...