Удаление строки таблицы с помощью кнопки

Следующий код, который я набрал, используется для добавления или удаления строк в таблице 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

Thanx его правильно частично! Я хочу удалить только строку, на которую нажата кнопка удаления, а не строки после нее! – Amal

Там нет необходимости создавать deleteRow (TABLEID), потому что, делая это, вы пытаетесь переопределить функцию deleteRow по умолчанию для javascript, поэтому вместо создания deleteRow (tableID) просто добавьте 'document.getElementById (' dataTable '). deleteRow (this.rowIndex)' для 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, а также использовать контекст. Идентификаторы используются как уникальные идентификаторы для элементов на вашей странице. Поскольку на вашей странице, вероятно, будет больше одной кнопки удаления, лучше было бы нацелить их вместо имени класса.

Итак, что бы я сделал, если бы был вами, это включить jQuery, это сделало бы вас намного проще для вас.

Добавьте нижнюю строку в свой html-документ перед закрывающим тегом тела.

<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 МЕТОД:

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); 
     } 
    }

КНОПКА ЭЛЕМЕНТОВ В TD функции

<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

Удаление строки таблицы с помощью кнопки

ответ

Смежные вопросы