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 のインストールチュートリアルの詳細な説明

推薦する

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

Ubuntu ブート自動起動サービス設定

Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

Vue は zip ファイルのダウンロードを実装します

この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

Linux で PCIe のバージョンと速度を確認する方法

PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

Macにmysql5.7.18をインストールする詳細な手順

1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...

CSS で左上の三角形を作成するいくつかの方法の詳細な説明

今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...

MySQL 5.7.13 のインストールと設定方法の Mac でのグラフィック チュートリアル

MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

CSS 評価効果の星の例

何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...

MySQL データベースの 1045 エラーの解決方法

ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...