如何使用添加和刪除按鈕動態添加表格以及動態添加行？

Question

我的JavaScript代碼

var a1=0; 
var count=1; 
function addRow(data) 
    { 
     var table = document.getElementById('student'); 
     var rowCount = table.rows.length; 
     var col = table.rows[2].cells.length; 
     var del = (data.id); 
     var row = table.insertRow(rowCount); 
     for(i=0;i<col;i++) 
     { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[2].cells[i].innerHTML; 
     }  
    } 

function addst(data) 
    { 
    var table = document.getElementById('student'); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    row.innerHTML = '&nbsp;'; 
    for(i=0;i<3;i++) 
     { 
      var row = table.insertRow(rowCount+i+1); 
      row.innerHTML = table.rows[i].innerHTML;  
      if(i==0) 
      { 
       row.id="st"+a1+""; 
      } 
     }  
    count++; 
} 

function delRow(data) 
{ 
    var table = document.getElementById('student'); 
    var rowCount = table.rows.length; 
     var p=data.parentNode.parentNode; 
     p.parentNode.removeChild(p); 
} 

function delst(data) 
{ 
    var table = document.getElementById('student'); 
    var rowCount = table.rows.length; 
    var p = document.getElementById(eq01); 
    table.removeChild(p); 
} 

我的HTML代碼

<fieldset> 
<legend align="center">Student Information</legend> 
<br> 
<table id="student"> 
    <tr id="s1">   
     <th><select name="" width="250px"> 
     <option value="" selected align="center">student Type</option> 
     <option value="">male</option> 
     <option value="">female</option> 
     </select></th> 
     <th><input type="button" value="+" onclick="addst(this)"/> 
     <th><input type="button" value="-" onclick="delst(this)"/> 
    </tr> 

    <tr id="label"> 
     <th align="left">class info</th> 
     <th align="left">Math</th> 
     <th align="left">Phy</th> 
     <th align="left">Chem</th> 
     <th align="left">Total</th> 
     <th align="left">Average</th> 
    </tr> 
    <tr id="c1"> 
     <td> 
      <select> 
       <option value="" selected>Select your class</option> 
       <option>8</option> 
       <option>9</option> 
       <option>10</option> 
       <option>11</option> 
      </select> 
     </td> 

     <td><input type="text" id="val02" size="16" name="math" placeholder="Math marks"/></td> 
     <td><input type="text" id="val03" size="16" name="phy" placeholder="Phy marks"/></td> 
     <td><input type="text" id="val04" size="16" name="chem" placeholder="Chem marks"/></td> 
     <td><input type="text" id="val06" size="16" name="total" placeholder="Total marks"/></td> 
     <td><input type="text" id="val07" size="16" name="avg" placeholder="Average marks"/></td> 
     <th><input type="button" value="+" id="r1" onclick="addRow(this)" /></th>   
     <th><input type="button" value="-" id="r1" onclick="delRow(this)" /></th> 
    </tr> 
</TABLE> 
</fieldset> 

的'addst'和'addRow'功能工作，但不知道有關應該如何寫刪除函數....可以請你們幫我出

「delst」應該刪除整個各自的學生信息，同時「delRow」應該刪除每個單排

Answer 1

你寫了一個名字DeleteRow功能，但你在click事件中調用delRow（this）。因爲你有錯誤。

Answer 2

嘗試這樣

function delst(data) 
{ 
    var table = document.getElementById('student'); 
    var rowCount = table.rows.length; 
    var p=data.parentNode.parentNode; 
    p.parentNode.removeChild(p); 
} 

Answer 3

請綁定在不同的表中的每個數據，然後嘗試刪除其下的一行表。它會很容易刪除父子元素。 示例：

<table> 
<tr> 
<td> 
<table><tr><!--your row data--><td></td></tr></table> 
</td> 
</tr> 
</table>