Reputation: 113
I have a table that is generated like so:
<div class="row">
<div class="col-md-12">
<div id="calendar"></div>
<table id="report" class="table">
<thead>
<tr>
<th>Event</th>
<th>Start Date</th>
<th>End Date</th>
<th>Status</th>
</tr>
</thead>
<tbody />
</table>
</div>
and populated using javascript:
var tableDetails = [
data.title,
$.fullCalendar.formatDate(startDate, "dd MMMM yyyy"),
$.fullCalendar.formatDate(endDate, "dd MMMM yyyy"),
data.published ? "Published" : "Not Published"
];
var row = $("<tr></tr>");
for (var i = 0; i < tableDetails.length; i++) {
row.append($("<td></td>").text(tableDetails[i]));
}
$("table#report > tbody:last").append(row);
Is there a way of doing a foreach loop through the rows of the table so that I can get a List of all the Events to pass to a controller? Getting a list/array of strings would suffice, as I can simply add EventIds to the table which will uniquely identify the event.
Upvotes: 0
Views: 1730
Reputation: 26143
The simplest form would be this...
$("#report tbody tr").each(function() {
// do something here with $(this) which is the row
});
Upvotes: 1
Reputation: 5930
Is there a way of doing a foreach loop through the rows of the table, so that I can get a List of all the Events to pass to a controller?
If all you need is an array of a certain property (say, the name of the event) of each object, this will do that for you. If not, the other answers provided are the correct way of iterating through each row/cell.
var list = $('#report > tbody > tr').map(function () {
return $(this).find('td:eq(0)').text();
}).get();
Say you have three events, it will return
list == ["event 1 name", "event 2 name", "event 3 name"];
Of course you can modify the return
line above to whichever property you like, e.g. $(this).attr('id')
Upvotes: 1
Reputation: 3047
Simple jQuery to itterate over each row and cell : (Does not include TH Cells)
$('#report tr').each(function() {
//do something to row...
$(this).find('td').each(function() {
//do something to cell...
});
});
Upvotes: 1