上次講到了如何動態給表格增加行,那么這次就講講如何刪除表格的行了。首先建立一個表格,
<table border="1">
?<tr>
??<td>姓名</td>
??<td>地址</td>
?</tr>
?<tbody id="mainbody">
?<tr id="delCell">
??<td>name</td>
??<td>address</td>
?</tr>
?</tbody>
</table>
取得tbody的元素var mailbody = document.getElementById("mainbody");,
接著取得要刪除行的元素var cell = document.getElementById("delCell");
最后就是從tbody中移去要刪除的行就可以了mainbody.removeChild(cell);
完整的代碼如下:
<html>
<head>
?<title>動態刪除表格的行</title>
?<script type="text/javascript">
?function deleteCell(){
??var mailbody = document.getElementById("mainbody");
??var cell = document.getElementById("delCell");
??if(cell!=undefined){
???? mainbody.removeChild(cell);
??}?
?}
</script>
</head>
<body>
<table border="1">
?<tr>
??<td>姓名</td>
??<td>地址</td>
?</tr>
?<tbody id="mainbody">
?<tr id="delCell">
??<td>name</td>
??<td>address</td>
?</tr>
?</tbody>
</table>

<input type="button" value="刪除" onclick="deleteCell()"/>
</body>
<html>