js手动控制表格添加和删除

最近帮一个网友做一个ecshop显示颜色和相关商品id,故把后台添加表格的js代码共享,,

js比较简单,可以在ie下运行,firefox无效...

<html>
    <head>
        <script>
            function addRow(){
                //添加一行
                var newTr = testTbl.insertRow();
                //添加两列
                var newTd0 = newTr.insertCell();
                var newTd1 = newTr.insertCell();
                //设置列内容和属性
                newTd0.innerHTML = '颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>';
                newTd1.innerHTML = '商品ID:<input type="text" name="colorGoodsId[]" /> <input type="button" value="删除行" onclick="delRow()"/>';
            }

            function delRow(){
                //删除行
                var delTr = testTbl.deleteRow();
                //删除两列
                var delTd0 = delTr.deleteCell();
                var delTd1 = delTr.deleteCell();
                //设置列内容和属性
                delTd0.innerHTML = '';
                delTd1.innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="postHandle.php" method="post">
            <table id="testTbl" border=1>
                <tr id="tr1">
                    <td width=240>
                        <input type="hidden" name="colorId1" id="colorId1" value="1"/>
                        颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>
                    </td>
                    <td id="b">
                        商品ID:<input type="text" name="colorGoodsId[]"/>
                        <input type="button" onclick="addRow()" value="添加一行"/>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

你可能感兴趣的:(html,PHP,IE,firefox)