jQuery 动态 Table 不返回数据更改

Question

我有一个 table，它是使用传入函数的数组数据动态创建的。此数据集为行，然后附加到 tbody。这一切都很好。

table 每行还包括复选框、文本输入和下拉菜单。

如果用户进行任何更改并单击保存按钮，则在检索数据时更改不会反映在行中。重要的是，每一行都不会保存输入的更改，并且在用户进行所有更改后仅保存一个，全部或none。

<div>
    <table id="myTable" class="sortable">
        <thead>
            <tr>
                <th>Rank</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Priority</th>
                <th>Completed</th>
                <th>Approved</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div>
    <input type="button" value="Save Changes" id="btnSaveTable" />
</div>


function PopulateTable(myObjectArray){

    var tableRows = [];
    var tableRow;
    $.each(myObjectArray, function(n){

        var completedSelected = "";
        var approvedSelected = "";
        if(myObjectArray[n].Completed == true){completedSelected = "checked";};
        if(myObjectArray[n].Approved == true){approvedSelected = "checked";};

        //THE FOLLOWING IS HARD CODED BECAUSE THERE ARE NO OTHER OPTIONS.
        var pdo = [
        { "value":"0", "name":"" },
        { "value":"1", "name":"1" },
        { "value":"2", "name":"3" },
        { "value":"3", "name":"3" },
        ]

        //pdo = 'PRIORITY DISPLAY OBJECT". GOING THROUGH AND SETTING 'SELECTED'
        //ON THE CHOICE BEFORE CREATING TABLE, OTHERWISE WILL NOT WORK.
        $.each(pdo, function(t){
            if(pdo[t].value == myObjectArray[n].Priority){
                pdo.value = myObjectArray[n].Priority + ' "selected"';
            };
        });

        tableRow = "<tr>" +
        "<td class='hidden'>" + myObjectArray[n].Id + "</td>" + 

        "<td class='center'><input class='tbRankNumber' type='text' maxlength='3' value='" + myObjectArray[n].Rank + "'/></td>" + 

        "<td>" + myObjectArray[n].LastName + "</td>" +
        "<td>" + myObjectArray[n].FirstName + "</td>" +

        "<td class='center'><select id='ddPriority'><option selected value='" +  myObjectArray[n].Priority + "'>" + myObjectArray[n].Priority + "</option><option value='0'></option><option value='1'>1</option><option value='2'>2</option><option value = '3'>3</option></select></td>" +

        "<td class='center'><input type='checkbox'" +  completedSelected + "/></td>" +
        "<td class='center'><input type='checkbox'" +  approvedSelected + " class='cbVerified'/></td>" +
        "</tr>"

        tableRows.push(tableRow);
    });

    var myTableData = tableRows.toString();
    $('#myTable tbody').append(myTableData);
};

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

    var rows = $("tbody tr",$("#myTable")).map(function() { 
        return [$("td",this).map(function() { 
            return this.innerHTML;     
        }).get()];
    }).get();

    $.each(rows, function(i, row){
        //COLUMNS: 0 = ID, 1 = Rank, 4 = Priority, 5 = Completed, 6 = Approved 
        //GET VALUE OF VALUE IN Rank COLUMN. A '+7' IS NEEDED TO COMPENSATE FOR 'VALUE="'
        var idxRankVal = row[1].search("value") + 7;
        var rankVal = row[1].charAt(idxRankVal);
        //SIMILAR TO Rank
        var idxPriority = row[4].search("selected") - 3;
        var PriorityVal = row[4].charAt(idxPriority);
        //CHECKBOXES ARE DIFFERENT. A '-1' WILL MEAN 'NO' OR 'FALSE'. ANY OTHER NUMBER IS THE OPPOSITE.
        var idxCompleted = row[5].search("checked");
        var idxApproved = row[6].search("checked");

        //!!!!!!!NOT GETTING CHANGES MADE IN TABLE. MAYBE DO ONCHANGE EVENTS TO SET THE VALUE?!!!!!!!!

    });
});

Answer 1

刚用过datatables.js。工作完美。它是免费的，甚至比我需要的还要多。

jQuery 动态 Table 不返回数据更改

jQuery Dynamic Table Not Returning Data Changes

arrays

jquery

dynamic-tables