使表格行可點擊+懸停更改背景

我有一個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>

點擊處理程序的工作原理，但是懸停功能沒有。可能是什麼問題呢？

來源

2011-09-10 TeaLeave

（1）請發佈實際呈現的HTML，而不是服務器端代碼。（2）「似乎不起作用」是什麼意思？你有任何錯誤？ – lonesomeday

你的選擇是錯誤的：它匹配''元素中的行，但你的行在''內。 –

弗雷德裏克是對的。將'$（'＃example tbody tr'）'改爲'$（'＃example tr'）'。而對於懸停部分，我推薦使用CSS。 –

從您的評論添加代碼到這個問題後，我注意到，你錯過了你的第二個文件準備關閉});處理程序。嘗試以下操作。注意我正在使用一個準備好的處理程序，並將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>

由於@克里斯Pietschmann指出，雖然，你可以得到與CSS一樣的效果，讓你維護更少的代碼。

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

來源

2011-09-10 14:27:02 tvanfosson

只需查看任何瀏覽器的錯誤控制檯就可以很容易地找到它。 – Dennis

@丹尼斯在這裏沒有分歧。由於原始問題未包含非工作代碼，因此在這方面有些具有挑戰性。 :-) – tvanfosson

這完美的傢伙!!!!!!!乾杯！！！！！ – TeaLeave

您可以使用CSS懸停定義不同的背景色：

tr:hover 
{ 
    background: red; 
}

來源

2011-09-10 14:05:54

這也適用於標題中的行。不是什麼似乎想要的。它也適用於所有表格，所以如果他只想要一張表格，他必須使用更具體的選擇器。 – tvanfosson

@tvanfosson或只是桌上的一個班級'table.hoverable tr：hover {...}' – Hogan

使表格行可點擊+懸停更改背景

回答

相關問題