今天使用table.removeChild(tr)去删除table下的某一行,竟然失效了。代码示例如下:
<table id="tbl"> <tr id="row1"><td>row1</td></tr> <tr id="row2"><td>row2</td></tr> <tr id="row3"><td>row3</td></tr> <tr id="row4"><td>row4</td></tr> <tr id="row5"><td>row5</td></tr> </table> <button onclick="javascript:deleteChild()">delete</button> <script type="text/javascript"> function deleteChild(){ var tbl=document.getElementById("tbl"); var row=document.getElementById("row1"); tbl.removeChild(row); } </script>
在Chrome捕获的异常为:Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
原来,规范的html中,<table>的子元素并不是<tr>,而是<tbody>,只不过浏览器都没有严格要求一定要将<tr>放在<tbody>中,所以一般都没什么问题,但使用table.removeChild(node),删除的却应该是tbody元素,而实际上,就算不加<tbody>元素,<tr>元素的parentNode都是<tbody>,而不是<table>(在chrome,IE9,FF下是,其他浏览器就没有试过。)
所以改为tbody.removeChild(tr),就可以了。