如何通过JQuery选择器构建对象列表并在Ajax中发送

Question

1. Explanation of my screen and fields:

Considering each value on the screen as editable inputs with the names: name_{id of the row}

ordinary_1 = 4.5
ordinary_2 = 3.8
overtimeApproved = false
overtimeApproved = true
overtime15_1 = 0
overtime15_2 = 0
overtime20_1 = 0
overtime20_2 = 0

Table on the screen:

When I click on Approve button , I will need to build a json with the values when " Overtime Approved is checked ", as below:

{
  "Id": "2",
  "Ordinary": "3.8",
  "OvertimeApproved": "true",
  "Overtime15": "0"
  "Overtime20": "0"
}

To build this Json I need to select the fields using JQuery Selectors and then send the Json in an Ajax command to my MVC in order to update those fields.

I don't know how to use editable datatables, and the way I explained might be the quickest solution.

So I need:

1. Build that Json using JQuery Selector, each() command, etc.

2. Send that in an Ajax (This I know how to do)

Answer 1

var data = [];
$("#tableID tr").each(function() {
    var cols = $(this).find("td");
    data.push({
        Id: cols.eq(0).prop('name').split('_')[1],
        Ordinary: cols.eq(0).text(),
        OvertimeApproved: cols.eq(1).find(":checkbox").is(":checked") ? "true" : "false",
        Overtime15: cols.eq(2).text(),
        Overtime20: cols.eq(3).text()
    });
});