user2101411 user2101411 - 1 month ago 6
HTML Question

Showing a default row dynamically with jQuery

I'm having some issues trying to figure out how to show a default table row with jQuery. For example, I am using jQuery's remove() method to remove a table row but I am not sure on how to display a default table row if no entries are available to be shown. Here is my code:

javascript -

// function to delete report
function deleteReport(id) {
if (confirm("Are you sure you want to delete this row?")) {
var parent = $('.reportTableData');

$.post('includes/ajax/task_tracker_ajax.php', {
action : 'delete_task',
row_id : id
}).done(function(data) {
if (data == "deleted!") {
var row = $('#tr_' + id);

row.fadeOut('slow', function() {
row.remove();
return false;
});

// blah...
if ($('.reportTableData tr td').html() == "") {
parent.html("<tr><td class='cellStyleString' colspan='5' style='text-align: center;'>No tasks completed during this time range.</td></tr>");
}
}
}).fail(function(data) {
alert(data);
});
} else {
return false;
}
}


html -


<table cellspacing="0" class="reportTableData" style='width: 900px; margin-bottom: 20px;'>
<thead>
<tr>
<th class='cellStyleTableHeaderDarkBlue' style='width: 100px; max-width: 100px;'>Name</th>
<th class='cellStyleTableHeaderDarkBlue' style='width: 85px; max-width: 85px;'>Title</th>
<th class='cellStyleTableHeaderDarkBlue'>Text</th>
<th class='cellStyleTableHeaderDarkBlue' style='width: 120px; max-width: 120px;'>Date</th>
<th class='cellStyleTableHeaderDarkBlue'>Report(s)</th>
<th class='cellStyleTableHeaderDarkBlue'></th>
<th class='cellStyleTableHeaderDarkBlue'></th>
</tr>
</thead>
<tbody>
<tr id="tr_id">
<td id="row_id" class='cellStyleString'>name</td>
<td contenteditable class='cellStyleString' id="title_id">title</td>
<td contenteditable class='cellStyleString' id="text_id">text</td>
<td contenteditable class='cellStyleString' id="insert_date_id">date</td>
<td class='cellStyleString' id="reports_id">reports</td>
<td class='cellStyleString'><img src="images/edit_report.png" style="float: right;" id="edit_id" onclick="editReport('id');"></td>
<td class="cellStyleString"><img src="images/x.png" style="float: right;" id="delete_id" onclick="deleteReport('id');"></td>
</tr>
</tbody>
</table>


Any help would be appreciated.

Thanks!

Answer

Changing:

if ($('.reportTableData tr td').html() == "") {
    parent.html("<tr><td class='cellStyleString' colspan='5' style='text-align: center;'>No tasks completed during this time range.</td></tr>");
}

for:

if ($('.reportTableData tbody tr').length == 0) {
    parent.html("<tr><td class='cellStyleString' colspan='5' style='text-align: center;'>No tasks completed during this time range.</td></tr>");
}

should create the default row when you have removed all rows.