前端表格（Table）多条数据可以增加行删除行json封装后Post数据到后台处理

主页点击每行上的add按钮

 $('button[data-role=SPAdd2]').each(function () {
                $(this).click(function () {  
                    layer.open({
                        type: 2,
                        title: false,
                        //closeBtn: 0, //不显示关闭按钮
                        title: '新增',
                        scrollbar: false,
                        shadeClose: true,
                        //shade: 0.8, 
                        //area: ['700px', '500px'],
                        area: ['900px', '300px'],
                        offset: '-10px',
                        //offset: 'rb', //右下角弹出
                        //time: 2000, //2秒后自动关闭
                        //anim: 2,
                        content: ["/@(ViewContext.RouteData.Values["controller"])/SPOAadd?morder=" + $(this).attr("data-key") + "&mainwc=" + $(this).attr("data-mainwc") + "&equipid=" + $(this).attr("data-equipid") + "&plant=" + $(this).attr("data-plnt"), 'yes'],
                           //end: function () { //此处用于演示
                           //     document.location.reload();
                           // }
                    });
                });
             });

　　Controller

public ActionResult SPOAadd(string morder, string mainwc, string equipid, string plant)
        {
            var model = new MaintenanceRecordValue();
            model.MOrder = morder;
            model.Plant = plant;
            BaseManager bm = new BaseManager(); 
            model.Plant = plant;
            var DList = bm.GetList<MaintenanceRecordValue>(p => (p.EquipID == "PAC30002" && !p.endtime.HasValue && p.replacetime.HasValue) || (p.EquipID == "PAC30002" && p.Status.ToString().ToUpper() == "END")).OrderByDescending(p => p.UpdateDate);
            ViewBag.DList = DList;
            ViewData["morder"] = morder;
            //ViewData["equipid"] = equipid;
            ViewData["plant"] = plant; 
            return View("SPOAadd", model);
        }

　　SPOAadd.cshtml

<table class="table table-bordered table-condensed" style="98%">
    <tr>
        <td>
            维修/保养单号
        </td>
        <td>
            @ViewData["morder"]
        </td>
        <td>
            设备编号
        </td>
        <td>
            @ViewData["equipid"]
        </td>
        <td>
            工厂
        </td>
        <td>
            @ViewData["plant"]
        </td>
    </tr>
</table>

<table id="tb1" class="table table-bordered table-condensed select_tableY">
    <thead>
        <tr>
            <th style=" 30px">
                配件编号
            </th>
            <th style=" 50px">
                配件描述
            </th> 
            <th style=" 30px">
                保修期
            </th>
            <th style=" 30px">
                配件消耗量
            </th>
            <th style=" 30px">
                单位
            </th>
            <th style=" 30px">
                序列号
            </th>
            <th style=" 30px">
                具体更换位置
            </th>
            <th style=" 30px">
                保修日期
            </th>
            <th style=" 30px">
                选项
            </th>
        </tr>
    </thead>
    <tbody id="spdetailss">
        @foreach (var item in ViewBag.DList)
        {
        <tr>
            <td><input class="form-control" id="SparePartNo" name="SparePartNo" placeholder="" readonly="readonly" type="text" value="@Html.Raw(item.SparePartNo)"></td>
            <td><label class="control-label" id="SPDesc" name="SPDesc">@Html.Raw(item.SPDesc)</label> </td>
            <td><label class="control-label" id="WarrantyPeriod" name="WarrantyPeriod">@Html.Raw(item.WarrantyPeriod + " " + item.WarrantyPeriodUnit)</label></td>
            <td><input class="form-control" id="SparePartQty" name="SparePartQty" placeholder="" readonly="readonly" type="text" value="@Html.Raw(item.SparePartQty)"></td>
            <td><label class="control-label" id="Unit" name="Unit">@Html.Raw(item.Unit)</label></td>
            <td><input class="form-control" id="Spareno" name="Spareno" placeholder="" type="text" value="@Html.Raw(item.Spareno)"> </td>
            <td><input class="form-control" id="Remark" name="Remark" placeholder="" type="text" value="@Html.Raw(item.Remark)"> </td>
            @*<td><textarea class="form-control" name="Remark">@Html.Raw(item.Remark)</textarea></td>*@
            <td><input class="form-control date-picker" data-date-format="yyyy-mm-dd" data-val="true" id="WarrantyDate" name="WarrantyDate" type="text" value=""></td>
            <td>
               <a href="javascript:void(0)" class="select_option">选择</a>
            </td>
        </tr>
        }


    </tbody>
</table>
<table  id="tb2" class="table table-bordered table-condensed select_table">
    <tbody>
        <tr class="choosen">
            <th style=" 30px">
                配件编号
            </th>
            <th style=" 50px">
                配件描述
            </th>
            <th style=" 30px">
                保修期
            </th>
            <th style=" 30px">
                配件消耗量
            </th>
            <th style=" 30px">
                单位
            </th>
            <th style=" 30px">
                序列号
            </th>
            <th style=" 30px">
                具体更换位置
            </th>
            <th style=" 30px">
                保修日期
            </th>
            <th style=" 30px">
                选项
            </th>
        </tr>
    </tbody>
</table>
<td class="bg-info">
    <button id="btn_submit" type="button" class="btn btn-primary btn-lg" style="display:block;margin:0 auto" onclick="SaveSp();">保存</button>
</td>
@*}*@

<script type="text/javascript">
    $(function () {      //jQuery实现复制当前tr到下面表格，删除复制tr
        $(".select_option").each(function (index) {
            $(this).click(function () {
                $(this).attr("data-index", index)
                $(this).html("删除");
                $(this).addClass('btn_delete')
                // console.log($(this).parents("tr"))
                $(".choosen").after($(this).parents("tr").clone())
                $(this).html("已选择");
                $(this).removeClass('btn_delete')
            })
        })
    })

    $(function () {
        $("body").on("click", ".btn_delete", function () {  
            var index = Number($(this).attr("data-index")) + 1
            console.log(index)
            console.log($(".select_table tr").eq(index).clone().html())
            $(".select_tableY tr").eq(index).find(".select_option").html('选择')
            $(this).parents("tr").remove()
        })
    })

    function SaveSp() {
        var result = []
        $('#tb1 tbody tr').each(function (i, o) {
            var thisItem = $(this);
            result.push({
                MOrder: $(o).find("label[name='SPDesc']").val(),
                Plant: $("#Plant").val(),
                SparePartNo: $(o).find("label[name='SPDesc']").text(),   //$(o).find("input[name='MOrder']").val()
                WarrantyDate: $(o).find("input[name='WarrantyDate']").val(),
                SparePartQty: $(o).find("input[name='SparePartQty']").val(),
                SPDesc: $(o).find("label[name='SPDesc']").text(),
                Unit: $(o).find("label[name='Unit']").text(),
                WarrantyPeriod: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[0],
                WarrantyPeriodUnit: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[1],
                Spareno: $(o).find("input[name='Spareno']").val(),
                Remark: $(o).find("input[name='Remark']").val(),
            })
        });

        $('#tb2 tr').each(function (i, o) { 
            result.push({
                MOrder: $(o).find("label[name='SPDesc']").val(),
                Plant: $("#Plant").val(),
                SparePartNo: $(o).find("label[name='SPDesc']").text(),   //$(o).find("input[name='MOrder']").val()
                WarrantyDate: $(o).find("input[name='WarrantyDate']").val(),
                SparePartQty: $(o).find("input[name='SparePartQty']").val(),
                SPDesc: $(o).find("label[name='SPDesc']").text(),
                Unit: $(o).find("label[name='Unit']").text(),
                WarrantyPeriod: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[0],
                WarrantyPeriodUnit: $(o).find("label[name='WarrantyPeriod']").text().split(" ")[1],
                Spareno: $(o).find("input[name='Spareno']").val(),
                Remark: $(o).find("input[name='Remark']").val(),
            })
        }); 

        $.ajax({
            //url: "/MiProjectDetail/Save" ,
            url: "@Url.Action("SPOAaddSave", "EM")",
            data: { Sp: JSON.stringify(result), mainwc: "", equipid: "" },
            type: "Post",
            dataType: 'json',
            success: function (data) {
                debugger;
                if (data.Success) {
                    layer.msg('success');
                    window.parent.location.reload();
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);

                } else {
                    debugger;
                    var aa = data.Errors[0];
                    layer.msg(aa);
                }
            }
        }); 
    }
</script>

　　后台Controller

public ActionResult SPOAaddSave(string Sp, string mainwc, string equipid)
        { 
            JavaScriptSerializer js = new JavaScriptSerializer();
            var startTime = DateTime.Now;
            // 把多维数组转换成List泛型。
            MaintenanceRecordValue model = new MaintenanceRecordValue();
            model = JsonConvert.DeserializeObject<List<MaintenanceRecordValue>>(Sp).AsEnumerable().FirstOrDefault();
            var resultqq = JsonConvert.DeserializeObject<List<MaintenanceRecordValue>>(Sp);
            List<MaintenanceRecordValue> jc = js.Deserialize<List<MaintenanceRecordValue>>(Sp);
            var a = jc[0].MOrder;
            model.Id = Guid.NewGuid();
            //model.replacetime = DateTime.Now;  //完成备件更换记录且完成并审核关闭(Close 状态)维修单后的时间
            OperationResult result = new OperationResult();
            BaseManager bm = new BaseManager();
            string sql = "select * from t_MaintenanceRecordValue where MOrder= '" + model.MOrder + "' and SparePartNo='" + model.SparePartNo.Trim() + "' and Spareno='" + model.Spareno.Trim() + "'";
            var data = bm.FillTable(sql);
            if (data.Rows.Count > 0)
            {
                result.Errors.Add("SN号(Spareno)已存在于这台机!");
                return Json(result, JsonRequestBehavior.AllowGet);
            }
           
            var user = Multek.Web.WebEnviorment.GetCurrentUser<EMMSUser>();
            model.Updateby = user.Code;
            model.UpdateDate = System.DateTime.Now;
            model.EquipID = equipid;
            result = bm.AddEntity<MaintenanceRecordValue>(model); 
            return Json(result);
        }