JavaScript を使用してテーブル情報を追加および削除する

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門

JavaScript は軽量なインタープリタ型の Web 開発言語です。言語システムはあまり複雑ではなく、シンプルで習得しやすいです。最新のブラウザにはすべて JavaScript エンジンが組み込まれているため、JavaScript ソース コードはブラウザ内で直接解釈および実行でき、ユーザーはサポートの問題を心配する必要がありません。これは、js を使い始めるための小さな演習です。

テーブル情報の追加と削除

シンプルな DOM 操作 HTML タグを実現できます。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>ドキュメント</title>
 <スタイル タイプ="text/css">
  *{
   マージン: 0;
   パディング: 0;
  }
 </スタイル>
 <script type="text/javascript">

  関数delA(){
     // ハイパーリンクをクリックするとその行が削除されます // これを使用して親要素を削除します var tr = this.parentNode.parentNode;

      //削除する人の名前を取得します。var name=tr.getElementsByTagName("td")[0].innerHTML;
     // ユーザーに削除するかどうかを尋ねます var flag=confirm(""+name+" を削除しますか?");
     
     if(フラグ){
      tr の親ノードから子ノードを削除します。
     }

     //新しいタブのポップアップなどのブラウザのデフォルトの動作を防止します。false を返します。
    }


  window.onload = 関数(){
   //ハイパーリンクをクリックして従業員の情報を削除します //リンクを取得します var allA=document.getElementsByTagName("a");


   //応答関数をバインドする for(var i=0;i<allA.length;i++){
    allA[i].onclick=delA;
   }


   //従業員機能を追加し、ボタンをクリックしてテーブルに情報を追加します var addEmpButton = document.getElementById("addEmpButton");
   addEmpButton.onclick=関数(){
    //入力ボックスのテキスト コンテンツを取得します。var empName=document.getElementById("empName").value;
    var email = document.getElementById("email").value;
    var 給与=document.getElementById("給与").value;
    

    //trを作成する
    var tr = document.createElement("tr");
    //tr にコンテンツを追加 tr.innerHTML="<td>"+empName+"</td>"+
        "<td>"+メール+"</td>"+
        「<td>"+給料+"</td>"+
        "<td><a href='javascript:;'>削除</a></td>";

     var a = tr.getElementsByTagName("a")[0];
     a.onclick=delA;
    // テーブルに tr を配置します var employeeTable=document.getElementById("employeeTable");
    //tbody を取得
    var tbody = document.getElementsByTagName("tbody")[0];

 

    tr の子要素を追加します。
   }


  }

 </スクリプト>
</head>
<本文>
 <テーブル id="従業員テーブル">
  <tr>
   <th>名前</th>
   <th>メール</th>
   <th>給与</th>
   <th>&nbsp;</th>
  </tr>
  <tr>
   <td>トム</td>
   <td>[email protected]</td>
   <td>5000</td>
   <td><a href="">削除</a></td>
  </tr>
  <tr>
   <td>ジェリー</td>
   <td>[email protected]</td>
   <td>8000</td>
   <td><a href="">削除</a></td>
  </tr>
  <tr>
   <td>ボブ</td>
   <td>[email protected]</td>
   <td>10000</td>
   <td><a href="">削除</a></td>
  </tr>
  <div id="formDiv">
   <h4>新しいスタッフを追加する</h4>
   <テーブル>
    <tr>
     <td class="word">名前: </td>
     <td class="inp">
      <input type="text" name="empName" id="empName">
     </td>
    </tr>
    <tr>
     <td class="word">メールアドレス: </td>
     <td class="inp">
      <input type="text" name="email" id="email">
     </td>
    </tr>
    <tr>
     <td class="word">給与: </td>
     <td class="inp">
      <input type="text" name="給与" id="給与">
     </td>
    </tr>
    <tr>
     <td colspan="2" align="center"> <!--colspan 属性と rowspan 属性は、セルがまたがる行数と列数です -->
      <!--align 属性はテキストの配置位置です -->
      <ボタン id="addEmpButton" 値="abc">
       提出する
      </ボタン>
     </td>
    </tr>
   </テーブル>
  </div>
 </テーブル>
</本文>
</html>

コード スニペット内のコメントは非常に明確で、練習に適しています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue.js+Elementはテーブル内の追加、削除、変更、クエリを実現します
  • JSはHTMLテーブルを追加、削除、変更します
  • JavaScriptはテーブルの現在の行の値を取得し、行を削除し、行を追加します
  • Vue.js はテーブルを動的に追加および削除する方法を実装します (ソース コードのダウンロードあり)
  • AngularJS はテーブルの追加、削除、変更、クエリを実装します (フロントエンドのみ)
  • テーブルを追加および削除するための純粋なネイティブ js
  • テーブル行を動的に追加および削除する JavaScript (IE/FF と互換性あり)
  • テーブル要素に対する js 操作の概要: テーブルの行と列を追加および削除する
  • Bootstrap + Vue.jsを使用してテーブルの動的な表示、追加、削除を実現する
  • テーブルの動的な追加と削除を実装するJavaScript

<<:  Docker 入門インストールチュートリアル (初心者版)

>>:  CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

推薦する

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

Linuxコマンドとファイル検索の詳しい説明

1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...

seata docker 高可用性デプロイメントの詳細な紹介

バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...

Navicateを使用してAlibaba Cloud Server上のMySQLに接続する

1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...

HTTP ステータス コード

このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

エラー mysql テーブル 'performance_schema...解決方法

テスト環境は、JDBCドライバを使用してMariaDB 5.7でセットアップされています。 <...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

Mac OS10.12 に mysql5.7.18 をインストールするチュートリアル

ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...

CSS @font-face パフォーマンス最適化の詳細な理解

この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...