使用CSS悬停时突出显示表格行

Question

I'll try to be as specific as possible. I have a table that highlights rows perfectly when the mouse hovers over them using all CSS. I'd like the user to be able to then click on a row and keep it highlighted until another row is clicked. Below is some sample code and CSS I'm using to do the highlighting. For reference, this is an MVC application which explains the...

@foreach (var item in Model) { }

...at the beginning

 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

Create a class called highlight (or something similar) in your CSS and then attach that class to your row when it's clicked. So, what it should do is remove the highlight class from all table rows, and then add it in to the one that needs highlighted like this. Pass in this to the onclick function like so:

onclick="HilightRowOnClick(this)"

and then use the function below. I used your function name:

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

And then the CSS for the highlight class:

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

Well the trick is using rgb backGround, the code is incomplete .. I just want show you an alternative way to do that you want it. Even though when you use 'this' to select the element... the condition isn't recognizing hexadecimals.