用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="增加一行" onclick="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都没提交？
恩……这是个问题，有待研究