Чтобы динамически удалить строку из таблицы с помощью javascript

Мне нужна помощь в удалении строки один за другим из нижней части таблицы при нажатии кнопки строки удаления.Чтобы динамически удалить строку из таблицы с помощью javascript

Выпуск:

Я использовал яваскрипт функцию, чтобы удалить строку из моей таблицы, вместо того, чтобы удалить строку по одному из нижней части она становится удаляемой в целом, за исключением первых 2 ряда. Мне нужно удалить строки из нижней по одной, за исключением первых двух строк, когда нажата кнопка удаления.

Это мой код

<html> 
<head> 
<script type="text/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[1].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          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=1; i<rowCount; i++) { 
       var row = table.rows[i]; 
        if(rowCount <= 2) { 
         alert("Cannot delete all the rows."); 
         break; 
        } 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 


      } 
      catch(e) { 
       alert(e); 
      } 
     } 
    </script> 

</head> 

<body> 
<form> 

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

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

    <br/> 
    <br/> 

    <table id="dataTable" align="center" width="350px" border="1"> 

    <tr> 
     <th> Product Name</th> 
      <th>Quantity</th> 
     <th> Brand</th>  

    </tr> 

    <tr> 

    <td> <input type="text" name="pname"/></td> &nbsp; 
    <td><input type="text" name="qty"/></td> 
    <td><select name="brand"/> 
    <option value="select">SELECT</option> 
    </select> 
    </td> 



    </table> 
</form> 
</body> 
</html>

источник

2016-05-30 sound

это поможет вам:

function deleteRow(tableID) { 

    try { 

     var table = document.getElementById(tableID); 

     var rowDelete = table.rows.length - 1; 

     if (rowDelete > 1) 

      table.deleteRow(rowDelete); 

     else 

     alert("Cannot delete all the rows.") 
    } 

    catch(e) { 

     alert(e); 
    } 
}

окончательный код:

<html> 
<head> 
<script type="text/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[1].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 

        case "select-one": 
          newcell.childNodes[0].selectedIndex = 0; 
          break; 
       } 
      } 
     } 

     function deleteRow(tableID) { 

     try { 

      var table = document.getElementById(tableID); 

      var rowDelete = table.rows.length - 1; 

      if (rowDelete > 1) 

       table.deleteRow(rowDelete); 

      else 

      alert("Cannot delete all the rows.") 
     } 

     catch(e) { 

      alert(e); 
     } 
    } 
    </script> 

</head> 

<body> 
<form> 

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

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

    <br/> 
    <br/> 

    <table id="dataTable" align="center" width="350px" border="1"> 

    <tr> 
     <th> Product Name</th> 
      <th>Quantity</th> 
     <th> Brand</th>  

    </tr> 

    <tr> 

    <td> <input type="text" name="pname" value="" /></td> &nbsp; 
    <td><input type="text" name="qty" value=""/></td> 
    <td><select name="brand"/> 
     <select> 
      <option value="select">SELECT</option> 

     </select> 
    </td> 
    </table> 
</form> 
</body> 
</html>

источник

2016-05-30 08:24:13 Ehsan

Прежде чем перейти к контуру удаления строк, вы должны проверить сначала количество строк. или вы можете удалить цикл, поскольку вы просто удаляете только одну строку, которая является последней строкой (rowCount-1);

Попробуйте это:

function deleteRow(tableID) { 

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

        if (rowCount > 2){ 

         //for(var i =1; i < 2; i++) { 
         // var row = table.rows[i]; 
           table.deleteRow(rowCount-1); 

         //} 
        } 
        else{ 
        alert("Cannot delete all the rows."); 
        } 

      } 
      catch(e) { 
       alert(e); 
      } 
}

источник

2016-05-30 08:34:36 brenners1302

Вот рабочий код, вы вратаря прервать выполнение после удаления строки, то почему он был удалить все строки

function deleteRow(tableID) { 

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

      for(var i=1; i<rowCount; i++) { 
       var row = table.rows[i]; 
        if(rowCount <= 2) { 
         alert("Cannot delete all the rows."); 
         break; 
        } 
        else{ 
         table.deleteRow(i); 
         rowCount--; 
         i--; 
         break; 
        } 
       } 


      } 
      catch(e) { 
       alert(e); 
      } 
     }

источник

2016-05-30 08:51:00 viveksinghggits

Смотрите, если это помогает:

$('#tbl1').on('click', 'input[type="button"]', function() { 
    $(this).closest('tr').remove(); 
}) 

$('p input[type="button"]').click(function() { 
    $('#tbl1').append('<tr><td><input type="text" class="txtBox" /></td><td><input type="button" value="X" /></td></tr>') 
});

Вот что-то, чтобы работать с HTML Snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<table id="tbl1" style="border: 1px solid blue"> 
    <tr> 
     <td> 
      <input type="text" class="txtBox" /> 
     </td> 
     <td> 
      <input type="button" value="X" /> 
     </td> 
    </tr> 
</table> 
<p> 
    <input type="button" value="Add"> 
</p>

источник

2016-05-30 08:56:39

Чтобы динамически удалить строку из таблицы с помощью javascript

ответ

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