I am trying to develop a full functional Gridview in MVC, data is showing in gridview but I want to edit one row on the same page ie the row should become textboxes when I click edit hyperlink.
here is my html code
<table>
<tr>
<th>
@Html.Label("ID")
</th>
<th>
@Html.Label("Name")
</th>
<th>
@Html.Label("Description")
</th>
<th>
@Html.Label("Date")
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
<input type="text" class="edit-input" />
@Html.DisplayFor(modelItem => item.Holiday_Id)
</td>
<td>
<input type="text" class="edit-input" />
@Html.DisplayFor(modelItem => item.Holiday_Name)
</td>
<td>
<input type="text" class="edit-input" />
@Html.DisplayFor(modelItem => item.Holiday_Description)
</td>
<td>
<input type="text" class="edit-input" />
@Html.DisplayFor(modelItem => item.Holiday_date)
</td>
<td>
<a class="edit" href="#">Edit</a> |
@* @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |*@
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</table>
my jQuery
@section Scripts{
<script type="text/javascript">
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
</script>
}
and my css for textboxes
.edit-input {
display:none;
}
but when I execute the screen i like this
I am new to mvc and I don't have much knowledge about it, what should I change in jQuery to fix it?