jQuery实现仅将表格已填写行插入JSON数组并提交至MVC控制器

修正后完整代码 #

首先修复原有代码的重复ID、取值错误问题，增加行非空校验逻辑，严格按照要求的字段顺序组装JSON对象：

@Html.DropDownList("ClarderSousSecteurID", "---  Tous  ---")
<input id="date" value='@DateTime.Now.ToString("dd/mm/yyyy")' />
<!-- 修复重复id问题 -->
<input id="p_no" type="hidden" value='@ViewBag.P_No' />

<table id="tableId" class="table table-bordered table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th>Student_id</th>
            <th>Name</th>
            <th>Did he perform well</th>
            <th>According to Criteria</th>
            <th>To the point</th>
            <th>EID</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<input type="submit" id="savebtn" class="btn btn-success" value="Save" style="display:none;" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
    var date;
    var val;
    $("#ClarderSousSecteurID").change(function () {
        val = $("#ClarderSousSecteurID").val();
        $("#tableId > tbody").empty();
        date = $("#date").val();
        $("#savebtn").show();
        alert("selected=" + val + date)

        var data = JSON.stringify({
            'val': val
        });

        $.ajax({
            type: "POST",
            url: "/judge_dashboard/Getstudents",
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var tr;
                //Append each row to html table
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].stud_id + "</td>");
                    tr.append("<td>" + data[i].stud_name + "</td>");
                    // 去掉重复id，后续直接通过td位置找input取值
                    tr.append("<td><input></td>");
                    tr.append("<td><input></td>");
                    tr.append("<td><input></td>");
                    tr.append("<td>" + data[i].E_id + "</td>");
                    // 修复插入位置，只插入到当前表格的tbody中
                    $('#tableId tbody').append(tr);
                }
                alert(data.length + "=== 条记录加载成功");
            }
        });
    });

    $("body").on("click", "#savebtn", function () {
        var marks = [];
        $("#tableId tbody tr").each(function () {
            var row = $(this);
            // 分别取三个评分输入框的值，去掉前后空格
            var one = $.trim(row.find("td").eq(2).find('input').val());
            var two = $.trim(row.find("td").eq(3).find('input').val());
            var three = $.trim(row.find("td").eq(4).find('input').val());
            // 校验：三个评分全部填写才加入数组
            if (one && two && three) {
                var details = {};
                // 严格按照要求的字段顺序定义属性，保证JSON序列化后顺序正确
                details.DATE = date;
                details.One_marks = one;
                details.Two_marks = two;
                details.Three_marks = three;
                details.Eid = $.trim(row.find("td").eq(5).text());
                details.Contest_id = val;
                marks.push(details);
            }
        });

        //Send the JSON array to Controller using AJAX.
        var postData = JSON.stringify({
            'judges': marks,
            'val': val
        });
        $.ajax({
            type: "POST",
            url: "/Contest_judge/InsertJudge",
            data: postData,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r + "=== 条记录插入成功");
            }
        });
    });
</script>

核心修改说明 #

• 行校验逻辑：遍历每行时先取三个评分输入的值，去除首尾空格后判断全部非空，才将该行数据加入数组
• 取值逻辑：原代码用.html()拿输入框内容会取到完整的input标签代码，修改为取input的val()属性拿到实际输入值，静态字段直接用.text()拿纯文本内容
• 字段顺序：组装details对象时严格按照DATE→One_marks→Two_marks→Three_marks→Eid的顺序定义属性，保证JSON序列化后的顺序符合后端接收要求
• 修复了原有代码中重复ID、行插入位置错误、未定义变量调用的问题

内容的提问来源于stack exchange，提问作者Muneeba