使用javascript從表中動態刪除行

我需要幫助從表格底部逐行刪除行，然後單擊刪除行按鈕。使用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片段

工作

<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從表中動態刪除行

回答

相關問題