I have a MVC application and I want to make my table row clickable and then when I hover over it, I want to change the background of it.
I have the following code that I got from a blog
<script type="text/javascript">
$(document).ready(function () {
$('#example tbody tr').click(function () {
alert('row was clicked');
});
});
</script>
I wanted to add the hover capability, so I modified it to:
$<script type="text/javascript">
$(document).ready(function () {
$('#example tbody tr').click(function () {
alert('row was clicked');
});
});
$(document).ready(function () {
$('#example tbody tr').hover(function () {
$(this).css('background-color','#ccc');
}, function () {
$(this).css('background-color','#fff');
});
</script>
my HTML:
<table id="example" border = "2">
<thead>
<tr style="border-style:solid" class="simplehighlight">
<th>
Name
</th>
<th>
Description
</th>
<th>
tblStatu
</th>
<th>
DueDate
</th>
<th>
AssignedTo
</th>
<th>
CreatedOn
</th>
<th>
CreatedBy
</th>
<th>
ModifiedOn
</th>
<th>
ModifiedBy
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr style="border-style:solid">
<td style="border-style:solid">
@item.Name
@*@Html.DisplayFor(modelItem => item.Name)*@
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.tblStatu.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.DueDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.AssignedTo)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedOn)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedBy)
</td>
<td>
@Html.DisplayFor(modelItem => item.ModifiedOn)
</td>
<td>
@Html.DisplayFor(modelItem => item.ModifiedBy)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.TaskId }) |
@Html.ActionLink("Details", "Details", new { id = item.TaskId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.TaskId })
</td>
</tr>
}
</tbody>
The click handler works, but the hover over function doesn't. What could be the problem?
After adding the code from your comment into the question, I noticed that you're missing a closing });
on your second document ready handler. Try the following. Notice I'm using one ready handler and chaining the jQuery functions to the same selector -- part of the beauty of jQuery.
$<script type="text/javascript">
$(document).ready(function () {
$('#example tbody tr').click(function () {
alert('row was clicked');
}).hover(function () {
$(this).css('background-color','#ccc');
}, function () {
$(this).css('background-color','#fff');
});
});
</script>
As @Chris Pietschmann notes, though, you could get the same effect with CSS which gives you less code to maintain.
<style>
#example tbody tr:hover
{
background-color: #ccc;
}
</style>
You can use CSS to define a different background color on hover:
tr:hover
{
background: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.