I have a table that displays every day of the week as header and for every row an employee. For every cell there is a start and end time to indicate what times the employee has to work on that given day. I want to be able to click on a cell and enter new start and end times, or remove them entirely.
I have a table similar to below:
<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
@foreach (var model in Model)
{
<tr>
<td>@Html.DisplayFor(FirstName => model.FirstName) @Html.DisplayFor(PrefixLastName => model.PrefixLastName) @Html.DisplayFor(LastName=> model.LastName)</td>
@for (int i = 0; i < 7; i++)
{
<td>
@Html.DisplayFor(StartTime => model.Shift.ElementAt(i).StartTime) <span> - </span> @Html.DisplayFor(EndTime => model.Shift.ElementAt(i).EndTime)
</td>
}
</tr>
}
How can I implement this?