只插入从 table 到 json 数组的填充行，方法是检查每一行是否为空，在数组中插入数据，否则跳过该行

Question

在我的场景中，我有一个 table，它从用户输入数据并首先将 table 行保存在 json 数组中，然后使用 [=29= 将该数组传递给 MVC 控制器].

table 中的数据（例如 name eid student id ）是从控制器使用 jquery 从服务器端填充的，然后用户必须针对每个 student.then 和 table 数据和标记使用 ajax.

从视图传递到控制器

问题场景：如果用户填充一些行而不是所有行，那么只应将填充的行数据插入 json array.How 我可以使用 Jquery 实现此目的吗？首先检查该行是否已填充然后将该行数据添加到数组

@Html.DropDownList("ClarderSousSecteurID", "---  Tous  ---")
<input id="date" value='@DateTime.Now.ToString(" dd/mm/yyyy")' />
<input id="date" 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>");
                    tr.append("<td><input id='one'></td>");
                    tr.append("<td><input id='two'></td>");
                    tr.append("<td><input id='three'></td>");
                    tr.append("<td>" + data[i].E_id + "</td>");

                    $('table').append(tr);
                }
                alert(r + "=== record(s) inserted." + data);
            }
        });


    });

    $("body").on("click", "#savebtn", function () {
        var marks = new Array();
        $("#tableId TBODY TR").each(function () {

            {
                alert("filled row")
                var row = $(this);
                var details = {};
                details.DATE = date;
                details.One_marks = row.find("TD").eq(2).html();
                details.Two_marks = row.find("TD").eq(3).html();
                details.Three_marks = row.find("TD").eq(4).html();
                details.Eid = row.find("TD").eq(5).html();
                details.Contest_id = val;
                marks.push(details);
            }

        });

        //Send the JSON array to Controller using AJAX.\

        var data = JSON.stringify({
            'judges': marks,
            'val': val
        });
        alert(data);
        $.ajax({
            type: "POST",
            url: "/Contest_judge/InsertJudge",
            data: data,

            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {


                alert(r + "=== record(s) inserted." + data);
            }
        });
    });








</script>

注意：Json 数组中的数据顺序应如下日期,一(或One_marks),二(或Two_marks),三(或Three_marks),开斋节

因为我必须将整行作为一个对象从控制器插入到数据库中，所以 json 数组中每一行的列元素的顺序很重要

Answer 1

根据您的示例，我不确定您是否标记了您的输入，因此此示例有 no-name 个输入，但从 header 行继承了它们的上下文。

$("body").on("click", "#savebtn", function() {
  var marks = new Array();
  $("#tableId tbody tr").each(function() {
    let mark = {
      Eid: $(this).find('td').eq(5).text(),
      DATE: 'date',
      Contest_id: 'val'
    }
    let empty = true;
    $(this).find('td').each(function(i, o) {
      if ($(o).find('input').length > 0 && $(o).find('input').eq(0).val().trim() !== '') {
        mark[$("#tableId thead th").eq(i).text()] = $(o).find('input').eq(0).val();
        empty = false;
      }

    })
    if (!empty) marks.push(mark);

  });

  //Send the JSON array to Controller using AJAX.\

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

  console.log(data)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <tr>
      <td>123</td>
      <td>abc</td>
      <td><input/></td>
      <td><input /></td>
      <td><input /></td>
      <td>111</td>
    </tr>
    <tr>
      <td>223</td>
      <td>abc</td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td>222</td>
    </tr>
    <tr>
      <td>323</td>
      <td>abc</td>
      <td><input /></td>
      <td><input /></td>
      <td><input /></td>
      <td>333</td>
    </tr>
  </tbody>
</table>
<button id='savebtn'>save</button>

只插入从 table 到 json 数组的填充行，方法是检查每一行是否为空，在数组中插入数据，否则跳过该行

insert only filled rows from table to json array by check each row if it is not empty insert data in array otherwise skip that row

html

model-view-controller

jquery

json

asp.net-ajax