I am creating a billing application and I am using codeigniter. I have a view where I can view the employee details.In this view file I have a action like delete and edit separately for each employee record. Is is possible to have a single edit button that can edit any employee record that is listed in my view?
My view file
<table class="resizable" bordercolor="#993300" border="1">
<thead>
<tr>
<th class="header">Employee id</th>
<th class="yellow header headerSortDown">First name</th>
<th class="green header">Last name</th>
<th class="red header">Email</th>
<th class="red header">Emergency contact</th>
<th class="red header">Category</th>
<th class="red header">ID card</th>
<th class="red header">Time in</th>
<th class="red header">Time out</th>
<th class="red header">Date of hire</th>
<th class="red header">Date of termination</th>
<th class="red header">Date of rehire</th>
<th class="red header">Reference number</th>
<th class="red header">Service limitation</th>
<th class="red header">Chair renter</th>
<th class="red header">Actions</th>
</tr>
</thead>
<tbody>
<?php
foreach($employee as $row)
{
echo '<tr>';
echo '<td>'.$row['id'].'</td>';
echo '<td>'.$row['emp_first_name'].'</td>';
echo '<td>'.$row['emp_last_name'].'</td>';
echo '<td>'.$row['emp_email_id'].'</td>';
echo '<td>'.$row['emp_emergency_contact'].'</td>';
echo '<td>'.$row['category'].'</td>';
echo '<td>'.$row['emp_id_card'].'</td>';
echo '<td>'.$row['emp_time_in'].'</td>';
echo '<td>'.$row['emp_time_out'].'</td>';
echo '<td>'.$row['emp_date_of_hire'].'</td>';
echo '<td>'.$row['emp_date_of_termination'].'</td>';
echo '<td>'.$row['emp_date_of_rehire'].'</td>';
echo '<td>'.$row['emp_reference_num'].'</td>';
echo '<td>'.$row['emp_service_limitation'].'</td>';
echo '<td>'.$row['chair_renter'].'</td>';
echo '<td class="crud-actions">
<a href="'.site_url("admin").'/employee/update/'.$row['id'].'" class="btn btn-info">view & edit</a>
<a href="'.site_url("admin").'/employee/delete/'.$row['id'].'" class="btn btn-danger">delete</a>
</td>';
echo '</tr>';
}
?>
</tbody>
</table>
Here i have a <a>
to perform edit and delete option. This action passes the id that i choose to edit or delete. Instead of having separate buttons for each employee.I need to have a single button and allow the user to select employee.Like this image
The easiest solution would be to use JQuery to attach a selected
class to the row which is clicked via something like:
$('tr').on('click', function () {
// Remove selection from other rows
$('tr.selected').removeClass('selected');
// Add selection to current row
$(this).addClass('selected');
});
That will allow you to place a 'cursor' onto a row, you'll want to style the rows with the selected
class using CSS or something similar.
Now you can have a single Edit button and use something like the following code to handle the click
event:
$('#edit').on('click', function () {
if ($('tr.selected').length() == 0) {
alert('Must select a row!');
} else {
// Handle 'edit' event by passing $(this) to whatever you need
// $(this) will be the currently selected row
}
});
This works since the $(this)
object acts as a reference to the currently selected row.