使用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”选择元素时，条件也无法识别十六进制。