修改从表中获取值的JSON对象

I am populating the html table using a JSON object using the following code -

我使用一个JSON对象使用下面的代码填充html表。

html -

html—

<input type="button" value="Generate Table" id="btn" />

<div id="dvTable">
</div>

JS -

$('#btn').click(function () {


    var obj = [{ id: 1, name: "bunny", city: "nyc",userinput:"",iscancelled:"" }, { id: 2, name: "sunny", city: "LA",userinput:"",iscancelled:"" }, { id: 3, name: "chubby", city: "PA",userinput:"",iscancelled:"" }
    , { id: 4, name: "punny", city: "DC",userinput:"",iscancelled:"" }, { id: 5, name: "money", city: "Pen",userinput:"",iscancelled:"" }];

    alert(JSON.stringify(obj));
    var table = document.createElement("table");
    table.border = "1";
    var columnCount = obj[0].length;

    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("th");
        headerCell.innerHTML = obj[0][i];
        row.appendChild(headerCell);
    }

    $.each(obj, function (i, obj) {
        row = '<tr data-id="' + obj.id + '"><td><input type="checkbox" value=' + obj.id + '></td><td>' + obj.id + '</td><td>' + obj.name + '</td><td>'
            + obj.city + '</td><td><input type="text" id="address" ></td></tr>';

        table.append(row);
    });

    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);



});

For simplicity, I have taken a small JSON object but usually I have a very heavy object. I want to take the value user enters in each textbox and save it in 'userinput' field of each element of JSON object. Moreover, I also want to save if 'checkbox' is checked or not and save a 'Y' or 'N' in the 'iscancelled' field of the JSON object.

为了简单起见，我使用了一个很小的JSON对象，但是通常我有一个非常重的对象。我想取用户在每个文本框中输入的值，并将其保存到JSON对象每个元素的“userinput”字段中。此外，我还想保存“复选框”是否选中，并在JSON对象的“iscancel”字段中保存“Y”或“N”。

I have written the following code for this but this doesn`t seem to work. What can be the problem ?

我已经为此编写了下面的代码，但是这似乎不能工作。有什么问题吗?

var revArray="";
$("[type='input']").each(function () {
        revArray = $(this).val;
    });

$.each(obj, function (i, obj) {

        for (var i = 0; i < revArray.length; i++) {
            obj.userInput= revArray[i];
        }
if ($("[type='checkbox']:checked"))
            obj.isCancelled = 'Y';
        else
            obj.isCancelled = 'N';
alert(JSON.stringify(obj));

1 个解决方案

#1

So I eventually got it done using jquery in the following manner accessing each row of the table and then finding textbox on that row -

因此，我最终使用jquery完成了它，以以下方式访问表的每一行，然后在该行上查找文本框

$('table tr:gt(0)').each(function (i, row) {
            var $row = $(row);
            var val1 = $row.find('input[type="text"]').val();
        });

For those who are facing problems like this can use it, works perfectly fine!

对于那些面临这样的问题的人，可以使用它，非常好!

#1