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 を応援していただければ幸いです。

以下もご興味があるかもしれません: