javascript - テーブルから行を追加/削除する

Question

いくつかの依存情報を含むこのテーブルがあり、追加の依存を追加/削除するための各行の追加および削除ボタンがあります。「追加」ボタンをクリックすると、新しい行がテーブルに追加されますが、「削除」ボタンをクリックすると、最初にヘッダー行が削除され、次にクリックすると、対応する行が削除されます。

ここに私が持っているものがあります:

Javascript コード

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML コード

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>

score 60 · Accepted Answer

いくつかの変更を加えた JavaScript:

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

HTML には少し違いがあります。

<table id="dsTable">
  <tbody>
    <tr>
      <td>Relationship Type</td>
      <td>Date of Birth</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>Spouse</td>
      <td>1980-22-03</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
    <tr>
      <td>Child</td>
      <td>2008-23-06</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
  </tbody>
</table>

score 10 · Accepted Answer

jQuery には、DOM から要素を削除する優れた機能があります。

closest() 関数が優れているのは、「要素自体をテストし、その祖先をたどることによって、セレクタに一致する最初の要素を取得する」ためです。

$(this).closest("tr").remove();

各削除ボタンは、関数呼び出しを使用して非常に簡潔なコードを実行できます。

score 1 · Accepted Answer

たくさんの良い答えがありますが、ここにもう 1 つ ;)

クリックのハンドラーをテーブルに追加できます

<table id = 'dsTable' onclick="tableclick(event)">

そして、イベントのターゲットが何であったかを見つけてください

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

そうすれば、行ごとにイベントハンドラーを追加する必要がなくなり、HTML がきれいに見えます。HTML に JavaScript を使用したくない場合は、ページの読み込み時にハンドラーを追加することもできます。

document.getElementById('dsTable').addEventListener('click',tableclick,false);

</p>

ここに作業コードがあります: http://jsfiddle.net/hX4f4/2/

score 0 · Accepted Answer

jQueryを使用することをお勧めします。現在行っていることは、jQueryがなくても簡単に実現できますが、新しい機能やより多くの機能が必要になるため、jQueryを使用すると時間を大幅に節約できます。また、1つのドキュメントに同じIDを持つ複数のDOM要素を含めるべきではないことにも言及したいと思います。このような場合は、クラス属性を使用してください。

html：

<table id="dsTable">
  <tr>
     <td> Relationship Type </td>
     <td> Date of Birth </td>
     <td> Gender </td>
  </tr>
  <tr>
     <td> Spouse </td>
     <td> 1980-22-03 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

javascript：

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

jQueryを参照する必要があることを忘れないでください。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

ここに実用的なjsfiddleの例があります：http： //jsfiddle.net/p9dey/1/

score 0 · Accepted Answer

まず、次のようにテーブルを正しくフォーマットしてみます。

表をフォーマットしても、少なくとも害はないと考えざるを得ません。

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>

score 0 · Accepted Answer

これは、 jQuery を使用したコードJS Binです。すべてのブラウザでテスト済み。ここで、美しい効果で削除するには、行をクリックする必要があります。それが役に立てば幸い。

score -1 · Accepted Answer

こんにちは、私はこのようなことをします：

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

そして、私は次のようなテーブルを持っています:

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

また、必要に応じてループを作成してテーブルを構築することもできます。そのため、テーブルを簡単に作成できます。編集でも同じことができます:)

javascript - テーブルから行を追加/削除する

8 に答える 8

Related

Reference