ボタンのクリックによるテーブル行の削除

入力した次のコードは、htmlテーブルの行の追加または削除に使用されます。特定の行を削除するには問題はありませんが、削除ボタンをクリックしたときに追加ボタンをクリックすると、私はできません。どのように私はこの問題を修正することができますボタンのクリックによるテーブル行の削除

「ヌルのonclick` `プロパティを読み取ることができません」

を

：私は述べ、警告メッセージが表示されますか？最初

<HTML> 
    <HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
     function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 

     for (var i = 0; i < colCount; i++) { 

      var newcell = row.insertCell(i); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch (newcell.childNodes[0].type) { 
      case "text": 
       newcell.childNodes[0].value = ""; 
       break; 
      case "checkbox": 
       newcell.childNodes[0].checked = false; 
       break; 
      case "select-one": 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 
      } 
     } 
     } 

     function deleteRow(tableID) { 
     try { 
      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 

      for (var i = 0; i < rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if (document.getElementById('button').onclick == true) { 
       if (rowCount <= 1) { 
       alert("Cannot delete all the rows."); 
       break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


      } 
     } catch (e) { 
      alert(e); 
     } 
     } 
    </SCRIPT> 
    </HEAD> 

    <BODY> 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

    <TABLE id="dataTable" width="350px" border="1"> 
     <TR> 

     <TD> 
      <INPUT type="button" name="button" value=delete id=delete onclick="deleteRow('dataTable')"> 
     </TD> 

     </TR> 
    </TABLE> 
    </BODY> 
</HTML>

出典

2016-10-13 Amal

'onclick'はイベントですので、そこに関数を割り当てる必要があります。このイベントは、これと他の何か（価値）のように決して真実ではありません。それは機能を指し示すでしょう – llouk

それを修正する方法は？ – Amal

私はあなたがそこで何をしようとしているのか知りません。その 'if'ステートメントを削除するだけです – llouk

まず物事document.getElementById('button')戻りundefinedあなたはid=buttonと、ページ内のどの要素を持っていないので。

これはエラーですが、少し違うテーブル行の削除に近づくべきだと思います。

function deleteRow(elem) { 
    var table = elem.parentNode.parentNode.parentNode; 
    var rowCount = table.rows.length; 

    if(rowCount === 1) { 
    alert('Cannot delete the last row'); 
    return; 
    } 

    // get the "<tr>" that is the parent of the clicked button 
    var row = elem.parentNode.parentNode; 
    row.parentNode.removeChild(row); // remove the row 
}

と各ボタンのクリックイベントハンドラとして、この機能を使用します：ので、これを行うことにより、

<table> 
    <tr> 
    <td><button onclick="deleteRow(this)">delete</button></td> 
    </tr> 
</table>

出典

2016-10-13 07:35:17 geekonaut

まだ動作していないという問題があります – Amal

修正済みです。私はonclickが与えられた関数を呼び出すと仮定しましたが、それは間違っていました。 – geekonaut

その部分的に正しい！削除ボタンがクリックされた行だけを削除したい – Amal

のdeleteRow（TABLEID）を作成する必要はありません

最も簡単な方法はこれですdeleteRow（tableID）を作成する代わりに、 'document.getElementById（' dataTable '）を追加するだけです。deleteRow（this.rowIndex）'をdeleteボタンのonclickに追加します。

<input type="button" name="button" value=delete id=delete onclick="document.getElementById('dataTable').deleteRow(this.rowIndex)">

出典

2016-10-13 07:41:27 sheetal

私がこれらのようなシナリオを処理する最も簡単な方法は、idsの代わりにクラスを操作し、コンテキストを使用することです。 IDは、ページ上のアイテムの一意の識別子として使用されます。あなたのページには複数の「削除ボタン」がある可能性が非常に高いので、代わりにクラス名を使用してそれらをターゲティングすることをお勧めします。

jQueryを組み込むのであれば、もっと簡単にできます。

次の行をhtmlドキュメントのbodyタグの前に追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

「削除ボタン」に「removeRowBtn」クラスを追加します。次に、行を削除する場合：

$(document).ready(function(){ 
    $('body').on('click', '.removeRowBtn', function(){ 
     // to make sure at least one row remains 
     if($('.removeRowBtn').length > 0){ 
      $(this).parents('tr').remove(); 
     } 
    }); 
});

これだけです。上記のコードでは、コンテキストを使用して、クリックしている「削除ボタン」の親行をターゲットにしています。どのテーブルを指定する必要はありません。行数や残っている行数などを計算します。

出典

2016-10-13 07:51:52

特定の行を削除するには、以下の方法があります。

SCRIPT METHOD：TD方向に

function deleteRow(element,tableID) { 
     try { 
     var tableElement = document.getElementById(tableID); 
     if(tableElement.rows.length <= 1){ 
      alert("Cannot delete all the rows."); 
      return; 
     } 
     var x = element.parentElement;//td tag 
     x = x.parentElement;// tr tag 
     x.remove(); 
     }catch(e) { 
      alert(e); 
     } 
    }

button要素

<TD><INPUT type="button" name="button" value=delete id=delete onclick="deleteRow(this,'dataTable')"></TD>

出典

2016-10-13 08:00:22

<div class="table-responsive">   
             <table class="table" id="testTable"> 
             <thead> 
              <tr> 
              <th>Col1</th> 
              <th>Col2</th> 
              <th>Type</th> 
              <th>Remove</th> 
              </tr> 
             </thead> 
             <tbody> 
              <tr> 
              <td><input type="text" id="mainScript" name="mainScript"></td> 
              <td><input type="text" id="rollBackScript" name="rollBackScript"></td> 
              <td><select name="type" id ="type" > 
                 <option value="Automated" selected >Automated</option> 
                 <option value="Manual" >Manual</option> 
               </select> 
              </td> 
              <td><input type="button" class="btn btn-danger" value="Delete" onclick="deleteRow(this);"></td> 
              </tr> 
             </tbody> 
             </table> 
             </div> 
        </div> 



        <div class="row" align="left"> 
        <input type="button" class="btn btn-success" value="Add Row" onclick="addRow('scriptsTable')" /> 
        </div>

JavaScript関数

<script> 


    function addRow(tableId) { 
    var table = document.getElementById(tableId); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[1].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
       case "button": 
        newcell.childNodes[0].value = "Delete"; 
        break; 
      } 
     } 
    } 

    function deleteRow(deleteBtn) { 

     var table = document.getElementById('scriptsTable'); 

     if(table.rows.length <= 2){ 
       alert("Cannot delete all the rows."); 
       return; 
      } 
     if (typeof(deleteBtn) == "object") { 
      $(deleteBtn).closest("tr").remove(); 
     } else { 
      return false; 
     } 
     } 
</script>

出典

2017-03-30 09:46:58

は、このいずれかを試してみてください。これは動作例です

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Position</th> 
         <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>Tiger Nixon</td> 
         <td>System Architect</td> 
         <td><button>Delete</button></td> 
        </tr> 
       </tbody> 
      </table> 

    <script> 
     $(document).ready(function() { 
     var table = $('#example').DataTable({ 
      "columns": [ 
       null, 
       null, 
       null, 
       { 
       "sortable": false 
       } 
      ] 
      });   
     }); 
     $('#example').on("click", "button", function(){ 
      console.log($(this).parent()); 
      table.row($(this).parents('tr')).remove().draw(false); 
     }); 
    </script>

出典

2017-11-09 06:22:58

ボタンのクリックによるテーブル行の削除

答えて

関連する問題