js复制多一条同样的元素

最新推荐文章于 2024-02-29 14:52:23 发布

小花花inhere

最新推荐文章于 2024-02-29 14:52:23 发布

阅读量1.4k

点赞数

分类专栏： JavaScript JavaScript之路文章标签： html javascript

本文链接：https://blog.csdn.net/IT429/article/details/52241969

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript之路

13 篇文章 0 订阅

订阅专栏

在做后台系统时通常有这样的情况，点击[+]出现一条同样的元素，且可以移除：
这里写图片描述

HTML：

<table class="table" id="property">
    <tr>
        <td>
            <a href="javascript:;" onclick="addFilterAttrs(this)"><span style="float:left;line-height:30px;">[+]</span></a>
            <div class="col-xs-4"><select class="form-control" onChange="changeCats(this)" id="property_num" name="property_num"><option value="0">请选择</option><option value='1'>用途</option><option value='2'>材质</option></select></div>
            <div class="col-xs-7"><input type="text" class="form-control" id="property_val" name="property_val"></div>
        </td>
    </tr>
</table>

JS：

//新增一个筛选属性 : 规格
    function addFilterAttr(obj)
    {
        var src = obj.parentNode.parentNode;            //以 Node 对象的形式返回指定节点的父节点
        var tbl = document.getElementById('tbody-attr');
        var row  = document.getElementById('tbody-attr').insertRow(tbl.rows.length);        //insertRow() 方法用于在表格中的指定位置插入一个新行
        var cell = document.getElementById('tbody-attr').insertRow(tbl.rows.length).insertCell(-1);                 //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
        cell.innerHTML = obj.parentNode.parentNode.cells[0].innerHTML.replace(/(.*)(addFilterAttr)(.*)(\[)(\+)/i, "$1removeFilterAttr$3$4-");  //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
    }
    //删除一个筛选属性
    function removeFilterAttr(obj)
    {
        var src = obj.parentNode.parentNode;            //以 Node 对象的形式返回指定节点的父节点
        var tbl = document.getElementById('tbody-attr');
        var row = src.rowIndex;
        if(src != null){
            tbl.deleteRow(row);
        }
    }

到这里就可以实现了，那么现在问题又来了……，我该怎么取同一个id的下拉框的多条值呢？

//获取规格值id
var specId = "";
$("[name=spec_num]").each(function(){
     specId += $(this).val() + ",";
});

//获取规格值对象的集合
var SpecValues = '[';
    var tag = true;
    $("#tbody-attr td").each(function () {
         var spValueName = $(this).find("[name=spec_val]").val();
        var spValueId = $(this).find("[name=spec_num]").val();
        SpecValues += '{"spValueName" : "' + spValueName + '" , "spValueId" : "' + spValueId + '"},'
 });

还有我该怎么回显呢？如果有多条数据的话

var data = [{"propertyName" : "rrrr,lll" , "propertyId" : "1"},{"propertyName" : "ercerv,ervv" , "propertyId" : "2"}];
$.each(data,function(i,project){
    var spValueName = project.propertyName; 
    $('#spec_val'+i).val(spValueName);
    addFilterAttr();
})