テーブルを動的に読み込み、削除する 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 インストール不要版 設定方法図
推薦する
Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明
目次プレースホルダーの置き換えコンソール印刷テーブル（）ログ、情報、警告、エラーグループ()、グルー...
html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。
webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...
MYSQL マスタースレーブ レプリケーションの知識ポイントの概要
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...
MySQL 8.0.15 で MGR シングル マスターと複数スレーブを構成する方法
1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...
Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法
SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...
js でショッピングモールのシミュレーションを実現
HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...
Echart Bar の 2 列チャート スタイルの最も完全な詳細な説明
目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...
MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)
区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...
MySQL での実行計画の詳細分析
序文効率的なSQL文の書き方は、Explain実行計画の分析と切り離せません。実行計画とは何か、効率...
大規模な MySQL テーブルに対する count() の実装を最適化しました
以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...
MySQL データ挿入最適化メソッドconcurrent_insert
スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...
アルバムと写真をアルバムに保存するためのWeChatアプレット
私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...
JavaScript の Strict モードの詳細な説明
目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...
JavaScript での AOP プログラミングの基本実装
AOP の紹介AOP (アスペクト指向プログラミング) の主な機能は、コアビジネスロジックモジュール...
ミニプログラムカスタムタブバーコンポーネントのカプセル化
この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコード...