Loop through table using jQuery, update specific cell in a row with a checked Checkbox
I just can't work this one out. I ha开发者_StackOverflow社区ve a table with a column of checkboxes. After an Ajax update, I want to update a specific cell in the rows with checked checkedboxes. The jQuery Ajax call I'm using is:
$.ajax({
type: 'POST',
url: 'ProcessDate',
data: params,
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
},
success: function(html) {
closeDialog();
$('#results tbody tr').each(function(){
$("#CaseID:checked").parent().siblings("td.DateUpdated").html('CHANGE');
});
},
cache: false
});
And the HTML is:
<table id="results">
<tr>
<td><input type="checkbox" id="CaseID"></td>
<td id="DateUpdated"></td>
</tr>
<tr>
<td><input type="checkbox" id="CaseID"></td>
<td id="DateUpdated"></td>
</tr>
<tr>
<td><input type="checkbox" id="CaseID"></td>
<td id="DateUpdated"></td>
</tr>
The Ajax call succeeds but my table update doesn't happen.
First, use classes since Ids must be unique, like this:
<tr>
<td><input type="checkbox" class="CaseID"></td>
<td class="DateUpdated"></td>
</tr>
Then use class selectors, like this:
$.ajax({
type: 'POST',
url: 'ProcessDate',
data: params,
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
},
success: function(html) {
closeDialog();
$(".CaseID:checked").parent().siblings("td.DateUpdated").html('CHANGE');
},
cache: false
});
There's no need for a .each()
loop, at least not with your example code...the class selector will get all the elements you want, regardless of the row.
精彩评论