Jquery克隆复制输入框

最新推荐文章于 2023-03-30 10:40:28 发布

时光清浅xyw

最新推荐文章于 2023-03-30 10:40:28 发布

阅读量873

点赞数

本文链接：https://blog.csdn.net/xuyawei_xyw/article/details/81876812

版权

在写商品属性时，添加某个属性时，如果是多属性，总得不免多写几个输入框，但是输入框不定。写少了，总有某个商品属性多的时候；写多了，在提交时候有时也不方便。索性用Jquery复制输入框，这就用到了clone()函数。

样式都是一个样，代码是：

<body>
    <div style="text-align:center;margin-top: 20px;">
        <a style="cursor:pointer;" href="javascript:void(0)" onclick="addrow(this);">[+]</a>
        <select style="text-align:center;font-size: 13px;color: #858585;background-color: #fbfbfb;border: 1px solid #d5d5d5;padding: 6px 12px;">
            <option>请选择</option>
            <option>上衣</option>
            <option>短裤</option>
        </select>
        <input style="font-size: 13px;color: #858585;padding: 6px 12px;" type="text" name='name[]' placeholder="请输入备注">
    </div>
</body>

JS代码如下：

<!-- 引入在线jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    function addrow(o){
        var div=$(o).parent();
        // 判断如果点击的前面是'[+]'
            if($(o).html() == '[+]'){
                // 执行克隆
                var newdiv=div.clone();
                //并将'[+]'、替换为'[-]'
                newdiv.find('a').html('[-]');
                div.after(newdiv);
                // 判断如果点击的前面是'[-]'，将其移除
            }else{
                div.remove();
        }
    }
</script>

点击加号，展现出输入框；点击减号，移除这个输入框：

时光清浅xyw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery克隆复制输入框

在写商品属性时，添加某个属性时，如果是多属性，总得不免多写几个输入框，但是输入框不定。写少了，总有某个商品属性多的时候；写多了，在提交时候有时也不方便。索性用Jquery复制输入框，这就用到了clone()函数。样式都是一个样，代码是：&lt;body&gt; &lt;div style="text-align:center;margin-top: 20...
复制链接

扫一扫