テーブルを動的に読み込み、削除する JavaScript

テーブルを動的に読み込み、削除する 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript操作により、データがテーブルに動的にロードされます
  • Javascript vue.js テーブルページング、Ajax データの非同期読み込み
  • Vue.js テーブル ページング Ajax データの非同期読み込み
  • Js テーブル 10,000 データの即時読み込み実装コード
  • JavaScript でテーブルを動的に読み込み、テーブル行を追加する方法

<<:  Bash の山括弧の深い理解 (初心者向け)

>>:  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テーブルをマージして削除する簡単な方法

シナリオ:クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...

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...