Динамическая таблица jQuery не возвращает изменения данных

Question

У меня есть таблица, которая динамически создается с массивом данных, передаваемых в функцию. Эти данные устанавливаются в строки, а затем добавляются к телу. Это все прекрасно работает.

Таблица также включает в себя, флажки, ввод текста и раскрывающееся меню в каждой строке.

Если пользователь вносит какие-либо изменения и нажимает кнопку сохранения, эти изменения не отражаются в строках при извлечении данных. Важно, чтобы каждая строка не сохраняла изменения ввода и сохраняла только один, все или ни одного после того, как пользователь внес все изменения.

<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. Работает отлично. Это бесплатно и даже делает больше, чем мне это тоже нужно.