隐藏的<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都没提交?

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值