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

最新推荐文章于 2019-11-10 15:47:52 发布

szzhi

最新推荐文章于 2019-11-10 15:47:52 发布

阅读量92

点赞数

分类专栏： php 文章标签： IE Firefox PHP HTML

本文链接：https://blog.csdn.net/szzhi/article/details/83525987

版权

php 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近帮一个网友做一个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="删除行" οnclick="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" οnclick="addRow()" value="添加一行"/>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

szzhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js手动控制表格添加和删除

最近帮一个网友做一个ecshop显示颜色和相关商品id，故把后台添加表格的js代码共享，，js比较简单,可以在ie下运行，firefox无效...&lt;html&gt; &lt;head&gt; &lt;script&gt; function addRow(){ //添加一行 ...
复制链接

扫一扫

专栏目录