Highlighting the Clicked Row of a Striped HTML Table

Highlighting the clicked row of a striped HTML table

http://jsfiddle.net/iambriansreed/xu2AH/9/

.table-striped class

.table-striped tbody tr.highlight td { background-color: red; }

... and cleaner jQuery:

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

Update: .live() has since been deprecated. Use .on().

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

Fixed: http://jsfiddle.net/iambriansreed/xu2AH/127/

Column and row highlight on hover in striped table in CSS

Change the way you set the stripped background.

Use another pseudo element, this time on the first td of the even rows, and aligned horizontally. (and with a lower z-index).

* {    margin: 0;    padding: 0;}
table {    width: 100%;    border-spacing: 0;    color: #212121;    text-align: left;    overflow: hidden;}
table>tbody>tr>td {    padding: 10px;    font-size: 14px;    position: relative;}

table>tbody>tr:hover {    padding: 20px;    background-color: #ffa !important;}
tr:nth-child(even) td:first-child::before {    content: "";    position: absolute;    background-color: lightgreen;    top: 0;    left: -5000px;    width: 10000px;    height: 100%;    z-index: -10;}td:hover::after {    content: "";    position: absolute;    background-color: #ffa;    left: 0;    top: -5000px;    height: 10000px;    width: 100%;    z-index: -1;}

 <table>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>        <tr>            <td>col1</td>            <td>col2</td>            <td>col3</td>            <td>col4</td>            <td>col5</td>            <td>col6</td>            <td>col7</td>            <td>col8</td>        </tr>    </table>

Highlight table row on button click

I'm not quite sure if this is what you were trying to achieve but if I understood your question correctly, this should help you.

Also next time you might wanna add the buttons that are included in your image since we don't have the code you have, this will be easier and save time for the people who are trying to help you.

<button data-value="highlight_row_pending">Pending</button>
<button data-value="highlight_row_accomp">Accomplished</button>

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" border="1" width="100%">
  <thead>
    <tr>
        <th></th>
        <th>#</th>
        <th>Complex</th>
        <th>Unit#</th>
        <th>Date Requested</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
  </tbody>
</table>

jQuery

$("button").each(function(){
    $(this).click(function(){
    var button_value = $(this).data("value");
    $("tr").each(function(){
      if($(this).find("input[type='radio']").is(':checked')){
        $(this).children("td").removeClass().addClass(button_value);
      }
    });
  });
});

Added jsFiddle https://jsfiddle.net/0nnxnxsq/1/

how to highlight the color of selected table row using the name attribute in jquery

Try these:

Style

tr:nth-child(odd){ background-color: #ddf7ef;}
body table tr.selectedRow{background-color: #fff2e1;}

Scripts

$("table tr").click(function(){
    $("table tr").removeClass('selectedRow');
    $(this).addClass('selectedRow');
});

Look this: JSFiddle

Highlight row is not getting disappear after I click the next table row

you can try below jquery to reset your background color where event will occur on focusout.

$(function(){
  $("table.content-table.highlighted tr.content-row").on("focusout", function(){
        $(this).css('background','#FFFF00 none 0 0 repeat'); // change color code as per your need
  });
});

Add highlight on clickable table row (using bootstrap) - CSS

Try using the 'table-hover' and override the color like this..

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

http://bootply.com/93988

fade in/out highlight to zebra striped table

Something like this?

.table{  border: 1px solid #eee;}
.table .row{  padding: 10px;  box-sizing: border-box;}
.table .row:nth-child(odd) {background-color: #fff;}
.table .row:nth-child(even) {background-color: #fafafa;}
.table .row.increased{  animation: 1s increased;}
.table .row.decreased{  animation: 1s decreased;}
@keyframes increased{  0%{    background: initial;  }  50%{    background: #a2ffa9;  }  100%{    background: initial;  }}
@keyframes decreased{  0%{    background: initial;  }  50%{    background: #ff6f6f;  }  100%{    background: initial;  }}

<div class="table">  <div class="row increased">  row  </div>  <div class="row">  row  </div>  <div class="row">  row  </div>  <div class="row decreased">  row  </div></div>

Highlighting the Clicked Row of a Striped HTML Table