js 数组添加跟删除

前言

样例场景： 根据查询出来的的数据生成一个个的方格，然后可以进行选择，选中时颜色变成蓝色，不选中默认灰色。

---

提示：下面案例可供参考

二、使用步骤

1.定义div

<div id="boxDivs" style="display:none">
        <div id="boxDivTwo"></div>
    </div>

2.请求数据，并动态生成数据方块

 funtion createBox()
 {
 	pageHelper.post("/XXXXXXX/aaaaaaa?projectId=" + projectId + "&sampleType=" + sampleType + "&generation=" + generation + "&batchNo=" + batchNo + "&sampleNo=" + sampleNo, {}, function (data) {
                var html = "";
                $.each(data, function (index, item) {
                    html = "<div class='boxDiv'style='display:inline-block' οnclick='colorChange(this)'>" +
                        "<input type='hidden' name='HdnId' value='" + item["id"] + "'>" +
                        "<input type='hidden' name='HdnSampleNo' value='" + item["sampleNo"] + "'>" +
                        "<input type='hidden' name='HdnSampleNm' value='" + item["sampleNm"] + "'>" +
                        "<input type='hidden' name='HdnCurrCapacity' value='" + item["currCapacity"] + "'>" +
                        "<input type='hidden' name='HdnUnit' value='" + item["unit"] + "'>" +
                        "<input type='hidden' name='HdnProjectId' value='" + item["projectId"] + "'>" +
                        "<input type='hidden' name='HdnProjectNm' value='" + item["projectNm"] + "'>" +
                        "<div class='divClass'>" + item["sampleNo"] + "</div></div> "
                    $("#boxDivs > div").append(html);
                });
            });
 }
       

3.点击方块事件

var boxArr = [];//声明数据存储

function colorChange(obj) {
		//获取隐藏值
        var id = $(obj).find("input[name='HdnId']").val();
        var sampleNo = $(obj).find("input[name='HdnSampleNo']").val();
        var sampleNm = $(obj).find("input[name='HdnSampleNm']").val();
        var currCapacity = $(obj).find("input[name='HdnCurrCapacity']").val();
        var unit = $(obj).find("input[name='HdnUnit']").val();
        var projectId = $(obj).find("input[name='HdnProjectId']").val();
        var projectNm = $(obj).find("input[name='HdnProjectNm']").val().toString();
        var color = $(obj).css("background-color");
		//组成选中的数据
        var arryInfo = { id: id, sampleNo: sampleNo, sampleNm: sampleNm, currCapacity: currCapacity, unit: unit, projectId: projectId, projectNm: projectNm };
        if (color == "rgb(173, 216, 230)") {
            $(obj).css("background-color", ""); 
            //根据id的值删除选中的某一项
            boxArr = boxArr.filter(item => item.id != id); 
        } else {
            $(obj).css("background-color", "LightBlue");
            //将选中的值放入数组；
            boxArr.push(arryInfo);
        } 
        //console.log(JSON.stringify(boxArr));
    }
        } 

4.数组遍历

 function foreach()
 {
 	//循环
 	for (var i = 0; i < boxArr.length; i++) {
                              var et = boxArr[i]
                            //检查选中的样本是否已经存在，若存在 则不操作
                            var isRepeat = false;
                            for (var j = 0; j < mxList.length; j++) {
                                if (mxList[j]["sampleId"] == et.id) {
                                    isRepeat = true;
                                    break
                                }
                            }
                            if (isRepeat) {
                                continue;
                            }
                            var mx = { billNo: $("#submitForm #billNo").val(), sampleId: et.id, sampleNo: et.sampleNo, sampleNm: et.sampleNm, currCapacity: et.currCapacity, useCapacity: 0, unit: et.unit, isDestroy: null, projectId: et.projectId, projectNm: et.projectNm == "null" ? "" : et.projectNm}
                            mxList.push(mx)
                        }
}

---