0
배열 데이터를 함수로 전달하여 동적으로 테이블을 만들었습니다. 이 데이터는 행으로 설정된 다음 tbody에 추가됩니다. 이 모든 것이 훌륭하게 작동합니다.jQuery 동적 테이블이 데이터 변경을 반환하지 않음
표에는 확인란, 텍스트 입력 및 각 행의 드롭 다운 메뉴도 포함되어 있습니다.
사용자가 변경하고 저장 버튼을 클릭하면 데이터를 검색 할 때 변경 내용이 행에 반영되지 않습니다. 사용자가 모든 변경을 한 후에는 각 행이 입력 변경을 저장하지 않고 하나만 저장하거나 모두 저장하거나 아무 것도 저장하지 않는 것이 중요합니다.
<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?!!!!!!!!
});
});