0
Ich habe eine Tabelle, die dynamisch mit Array-Daten erstellt wird, die an eine Funktion übergeben werden. Diese Daten werden in Zeilen gesetzt und dann an den tBody angehängt. Das alles funktioniert großartig.jQuery Dynamische Tabelle, die keine Datenänderungen zurückgibt
Die Tabelle enthält auch Kontrollkästchen, eine Texteingabe und ein Dropdown-Menü innerhalb jeder Zeile.
Wenn der Benutzer Änderungen vornimmt und auf die Schaltfläche zum Speichern klickt, werden die Änderungen nicht in den Zeilen wiedergegeben, wenn die Daten abgerufen werden. Es ist wichtig, dass jede Zeile bei einer Änderung der Eingabe nicht speichert und nur eine, alle oder keine speichert, nachdem der Benutzer alle Änderungen vorgenommen hat.
<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?!!!!!!!!
});
});