隐藏的<tbody>

        用Javascript实现一个类似Excel表格的功能：输入一行表格后，点击一个按钮，在表格最下面增加一行以便用户继续输入一行数据。

<table> 属性从略 <caption><h1>可增长表格</h1></caption> <form> <tr> <td><input type="text" size="8"></td> </tr> <tr> <td><input id="trAddBtn" type="button" value="增加一行" οnclick="return addNew_onclick()"></td> </tr> </form> </table>

Javascript代码如下

<script type="text/javascript"> function addNew_onclick(){     var newTr = document.create('tr');     var oldNode = document.getElementById('trAddBtn');     document.getElementsByTagName("table")[0].insertBefore(newTr, oldNode); } </script>

结果报错：exception : Not_Found_Error 8

        用alert()测试newTr, oldNode, document.getElementsByTagName("table")[0]都是能找到的，而且也有insertBefore()函数。那Not_Found_Error到底是没找到啥子东西呢？没有更多的错误信息可以参考。百思不得其解啊。

        这时豹子想了个绝招：

oldNode.parentNode.insertBefore(newTr, oldNode);

很优雅地把问题解决了。

        我喝完牛奶泡燕麦，去厕所小解准备上床睡觉，忽然灵光一闪，立马试了试：

alert(document.getElementsByTagName('table')[0]); // 显示HTML table element alert(oldNode.parentNode);                                        // 显示HTML table section element

看来oldNode代表的<tr>标签其父节点并不是<table>！还能是什么呢？

        打开Chrome开发人员工具Elements树结构，<table>下面两个节点是<caption>和<tbody>。

        就是这个<tbody>！一开始还以为是Chrome特有的表示，被我下意识的视而不见了。试试

document.getElementsByTagName("tbody")[0].insertBefore(newTr, oldNode);

解决了。

        太狡猾了，<table>和<tr>之间还有一级<tbody>是隐藏的。

        //xk> 后话

        呃……增长列表的功能基本实现了，但是……为毛我提交到PHP服务器后从_POST数组中只能取到最初就有的一个input，动态添加的input都没提交？

        恩……这是个问题，有待研究