隐藏的<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="增加一行" 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都没提交?

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

<table><thead><tr><th data-spm-anchor-id="5176.28103460.0.i429.22481db8KRCfLK">序号</th><th data-spm-anchor-id="5176.28103460.0.i441.22481db8KRCfLK">功能模块</th><th>描述</th></tr></thead><tbody><tr><td>1</td><td>RFID</td><td>- 通过modbus tcp/rtu协议同RFID通讯</td></tr><tr><td></td><td data-spm-anchor-id="5176.28103460.0.i440.22481db8KRCfLK"></td><td>- 基于工位RFID做调度和跟踪每个工段的料盒、托盘流向</td></tr><tr><td></td><td></td><td>- 记录相关库存,并处理异常</td></tr><tr><td>2</td><td>设备管理</td><td>- 统一管理设备元数据</td></tr><tr><td></td><td></td><td>- 通过modbus tcp/rtu协议同PLC通讯监控设备状态(四种运作状态:运行(1)、待机(2)、异常(3)、维护(4))</td></tr><tr><td></td><td></td><td>- 在前端界面展示,提供异常报警抛出</td></tr><tr><td data-spm-anchor-id="5176.28103460.0.i431.22481db8KRCfLK">3</td><td>实时库存管理</td><td>- 设置缓存分档规则</td></tr><tr><td></td><td></td><td>- 在相关工位读取rfid调mes获取绑定分档信息,调度料盒进缓存立库</td></tr><tr><td>4</td><td>报警管理</td><td>- 设置报警规则,报警等级</td></tr><tr><td></td><td></td><td data-spm-anchor-id="5176.28103460.0.i439.22481db8KRCfLK">- 定时监控PLC和相关点位数值,超出阈值时记录报警,提供报警接口</td></tr><tr><td>5</td><td>数据采集</td><td>- 设置设备的关键采集点位</td></tr><tr><td></td><td></td><td>- 根据配置的点位从plc等采集设备数据</td></tr><tr><td></td><td></td><td data-spm-anchor-id="5176.28103460.0.i438.22481db8KRCfLK">- 时序点位数据进入时序数据库方便统计</td></tr><tr><td>6</td><td>工厂耗用</td><td>- 监控智能电表数据</td></tr><tr><td></td><td></td><td>- 按时间维度存储到时序数据库</td></tr><tr><td></td><td></td><td>- 折线图展示耗用情况</td></tr><tr><td>7</td><td>工艺产能</td><td>- 设置工艺工段元数据,工段标准产能,班次元数据</td></tr><tr><td></td><td></td><td>- 采集工段产能数据统计每2小时产能</td></tr><tr><td></td><td></td><td data-spm-anchor-id="5176.28103460.0.i403.22481db8KRCfLK">- 设定班次结束定时统计当班产能数据</td></tr><tr><td>8</td><td>OEE</td><td data-spm-anchor-id="5176.28103460.0.i405.22481db8KRCfLK">- 定时采集设备运行状态</td></tr><tr><td></td><td></td><td>- 统计记录设备正常运行时间、待机时间、异常时间、维护时间、报警次数、实际产出等</td></tr><tr><td></td><td></td><td data-spm-anchor-id="5176.28103460.0.i407.22481db8KRCfLK">- 折线图展示设备有效利用率、产能达成率、时间开动率(开动时间 / 负荷时间)、性能开动率、合格品率</td></tr><tr><td>9</td><td>时间同步服务</td><td data-spm-anchor-id="5176.28103460.0.i436.22481db8KRCfLK">- plc和上位机使用ntp协议</td></tr></tbody></table> 转为csv
05-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值