使用CSS懸停時突出顯示表格行

Question

我會嘗試盡可能具體。 我有一張桌子，當鼠標使用所有CSS懸停在行上時，它們可以完美地突出顯示行。 我希望用戶能夠然后單擊一行並將其突出顯示，直到單擊另一行。 以下是一些示例代碼和我正在用來突出顯示的CSS。 作為參考，這是一個MVC應用程序，它解釋了...

@foreach (var item in Model) { }

...一開始

 function HilightRowOnClick() { //alert($(row).closest('tr').index()) $(document).ready(function () { $('tr').click(function () { //if (this.style.background == "" || this.style.background == "#badecc") { if (this.style.backgroundColor == "#badecc") { alert($("Color is normal?")); $(this).css('background', 'burlywood'); } else { $(this).css('background', '#badecc'); alert("Color is not normal?"); } }); }); } 

 .DBTable { width: 100%; } .DBToprow { font-size: 180%; font-weight: 600; } .DBTable td { font-size: 50%; padding: 7px; } .DBTable th { border-style: solid; border-width: 1px; padding: 7px; } .DBTable tr { background: #badecc; border-style: solid; border-width: 1px; } .DBTable tr:hover { background-color: burlywood; } 

 <table class="DBTable"> <tr class="DBToprow"> <td></td> <td> @Html.DisplayNameFor(model => model.ClientID) </td> <td> @Html.DisplayNameFor(model => model.Active) </td> <td> @Html.DisplayNameFor(model => model.BankID) </td> </tr> @foreach (var item in Model) { <tr onclick="HilightRowOnClick()"> <th> @Html.DisplayFor(modelItem => item.ClientID) </th> <th> @Html.DisplayFor(modelItem => item.Active) </th> <th> @Html.DisplayFor(modelItem => item.BankID) </th> </tr> } </table> 

Answer 1

在CSS中創建一個稱為highlight （或類似名稱）的類，然后在單擊該類時將該類附加到您的行中。 因此，應該做的是從所有表行中刪除突出顯示類，然后將其添加到需要突出顯示的類中。 像這樣將其傳遞給onclick函數：

onclick="HilightRowOnClick(this)"

然后使用下面的功能。 我用了你的函數名：

function HilightRowOnClick(el) {
    $('tr').removeClass('highlight');
    $(el).addClass('highlight');
}

然后CSS的highlight類：

.DBTable tr.highlight {
    background: burlywood;
}

Answer 2

  $(document).ready(function () { $('tr').click(function () { $('tr').removeClass("clicked"); $(this).addClass("clicked"); }); }); 

 .DBTable { width: 100%; } .DBToprow { font-size: 180%; font-weight: 600; } .DBTable td { font-size: 50%; padding: 7px; } .DBTable th { border-style: solid; border-width: 1px; padding: 7px; } .DBTable tr { background: #badecc; border-style: solid; border-width: 1px; } .DBTable tr.clicked { background: burlywood; border-style: solid; border-width: 1px; } .DBTable tr:hover { background-color: burlywood; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="DBTable"> <tr class="DBToprow"> <td></td> <td> @Html.DisplayNameFor(model => model.ClientID) </td> <td> @Html.DisplayNameFor(model => model.Active) </td> <td> @Html.DisplayNameFor(model => model.BankID) </td> </tr> @foreach (var item in Model) { <tr> <th> @Html.DisplayFor(modelItem => item.ClientID) </th> <th> @Html.DisplayFor(modelItem => item.Active) </th> <th> @Html.DisplayFor(modelItem => item.BankID) </th> </tr> } </table> 

Answer 3

 function HilightRowOnClick() { //alert($(row).closest('tr').index()) $(document).ready(function () { $("tr").click(function () { console.log(this.style.backgroundColor); //if (this.style.background == "" || this.style.background == "#badecc") { if (this.style.backgroundColor == 'rgb(186, 222, 204)') { console.log('#1'); this.style.backgroundColor = 'red'; } else { console.log('#2'); this.style.backgroundColor = '#badecc'; } }); }); } 

 .DBTable { width: 100%; } .DBToprow { font-size: 180%; font-weight: 600; } .DBTable td { font-size: 50%; padding: 7px; } .DBTable th { border-style: solid; border-width: 1px; padding: 7px; } .DBTable tr { background: #badecc; border-style: solid; border-width: 1px; } .DBTable tr:hover { background-color: burlywood; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="DBTable"> <tr class="DBToprow"> <td></td> <td> @Html.DisplayNameFor(model => model.ClientID) </td> <td> @Html.DisplayNameFor(model => model.Active) </td> <td> @Html.DisplayNameFor(model => model.BankID) </td> </tr> @foreach (var item in Model) { <tr onclick="HilightRowOnClick()"> <th> @Html.DisplayFor(modelItem => item.ClientID) </th> <th> @Html.DisplayFor(modelItem => item.Active) </th> <th> @Html.DisplayFor(modelItem => item.BankID) </th> </tr> } </table> 

好吧，訣竅是使用rgb backGround， 代碼不完整 ..我只想向您展示一種您想要的替代方法。 即使使用“ this”選擇元素時，條件也無法識別十六進制。