jsはテーブルの追加と削除の操作を動的に実装します

この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実行効果は図に示されています（2つの実装スキーム、コメントされているのは最初の実装スキームです）

コード：

<!DOCTYPE html>
<html>

 <ヘッド>
  <メタ文字セット="UTF-8">
  <タイトル></タイトル>
 </head>
 <スタイル タイプ="text/css">
  
  div{
   テキスト配置:中央;
   ボックスのサイズ: 境界線ボックス;
   幅:100%;
  }
  #div1{
   
   左マージン: 300px;
   幅: 800ピクセル;
   上マージン: 50px;
  }
  #div2{
   
   左マージン: 300px;
   幅: 800ピクセル;
   パディング上部:50px;
  }
  #テーブルID{
    幅: 580ピクセル;
   }
 </スタイル>
 

 <本文>
  <div id="div0">
   <div id="div1">
   <input type="text" id="userid" placeholder="IDを入力してください" />
   <input type="text" id="username" placeholder="名前を入力してください" />
   <input type="text" id="gender" placeholder="性別を入力してください" />
   <input type="button" value="追加" id="追加"/>
  </div>
  
  <div id="div2">
   <テーブル ボーダー="1px" 配置="center" id="テーブルID">
    <caption style="font: '微软雅黑';font-size:20px;">学生情報フォーム</caption>
    <tr>
     <th>番号</th>
     <th>名前</th>
     <th>性別</th>
     <th>オペレーション</th>
    </tr>
    <tr>
     <td>1</td>
     <td>リンフー・チョン</td>
     <td>張無極</td>
     <td><input type="button" value="削除" style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
    <tr>
     <td>1</td>
     <td>リンフー・チョン</td>
     <td>張無極</td>
     <td><input type="button" value="削除" style="color: blue;" onclick="delTr(this)" /></td>
    </tr>
    <tr>
     <td>1</td>
     <td>リンフー・チョン</td>
     <td>張無極</td>
     <td><input type="button" value="削除" style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
   </テーブル>
  </div>
  </div>
 </本文>
 <script type="text/javascript">
  // 追加ボタンがクリックされると、次のメソッドがトリガーされます document.getElementById("add").onclick=function(){
   // 各テキスト ボックスの内容を取得します。var id = document.getElementById("userid").value;
   var name = document.getElementById("ユーザー名").value;
   var 性別 = document.getElementById("性別").value;
   
  /* // IDを追加
   var td_id = document.createElement("td");
   var text_id = document.createTextNode(id);
   td_id.appendChild(テキストID)
  
   
   // ユーザー名を追加
   var td_username = document.createElement("td");
   var text_username = document.createTextNode(名前);
   td_username.appendChild(テキストユーザー名);
     
   // 性別を追加
   var td_gender = document.createElement("td");
   var text_gender = document.createTextNode(性別);
   td_gender.appendChild(テキストの性別);
   
   // ボタンを追加します var td_button = document.createElement("td");
   var ele_input = document.createElement("input");
   ele_input.setAttribute("type","button");
   ele_input.setAttribute("値","削除");
   ele_input.setAttribute("onclick","delTr(this)");
   ele_input.style.color="青"; 
   td_button.appendChild(ele_input);
   
   var ele_tr = document.createElement("tr");
      ele_tr.appendChild(td_id);
   ele_tr.appendChild(td_username);
   ele_tr.appendChild(td_gender);
   ele_tr.appendChild(td_button);
   var ele_table = document.getElementsByTagName("table")[0];
   
   ele_table.appendChild(ele_tr);*/
   
   
   // innerHtml メソッドを使用してテーブルを動的に追加します var tab = document.getElementsByTagName("table")[0];
   tab.innerHTML+="<tr>\n"+
    "<td>"+id+"</td>\n"+
    "<td>"+名前+"</td>"+
    "<td>"+性別+"</td>"+
    "<td><input type='button' value='削除' onclick='delTr(this)' style='color:blue'/></td>"+
    「</tr>」
  }
  
  
       
   関数delTr(obj){
    
    var テーブル = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    テーブルから子を削除します。   
   }
 </スクリプト>
</html>

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

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