Question

我有一个MVC应用程序，我想让我的表行可点击，然后当我将鼠标悬停在它上面时，我想改变它的背景。

我有以下来自博客的代码

<script type="text/javascript">
   $(document).ready(function () {
      $('#example tbody tr').click(function () {
          alert('row was clicked');
      });
  });     

</script>

我想添加悬停功能，因此我将其修改为：

$<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>

我的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>

点击处理程序有效，但悬停在功能上却没有。可能是什么问题？

Answer 1

将评论中的代码添加到问题中后，我注意到您在第二个文档就绪处理程序中错过了结束});。请尝试以下方法。注意我正在使用一个就绪处理程序并将jQuery函数链接到同一个选择器 - 这是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>

正如@Chris Pietschmann指出的那样，你可以通过CSS获得相同的效果，这样可以减少维护代码。

<style>
#example tbody tr:hover
{
    background-color: #ccc;
}
</style>

Answer 2

您可以使用CSS在悬停时定义不同的背景颜色：

tr:hover
{
    background: red;
}

使表格行可点击+悬停更改背景

2 个答案: