CODEWITHSUNDEEP
javascriptjqueryhtmlcss
asliwinski
asliwinski

Reputation: 1704

Highlight rows in HTML table (hovered over row and preceding rows)

Assuming an example table:

<table>
   <tr>
     <th>Head 1</th>
     <th>Head 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
</table>

I'm looking for the best technique to highlight the rows <= n, where n is the hovered over row (excluding the header row). For example, if the mouse is over

<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

the following part of the table should be highlighted:

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>
<tr>
  <td>Data 3</td>
  <td>Data 4</td>
</tr>
<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

Any ideas how this effect could be achieved?

Upvotes: 5

Views: 6492

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105883

Basically, you could see the thing the opposite way : any tr after hovered tr should have no background: test this : 

table:hover tr {
  background:gray;
}
table:hover tr:hover ~tr {
  background:none;
}

DEMO

=============== EDITED from request in comments ================

React only on last element in row.

BEWARE :This option doesn't allow to click in cells but last one of each row.

table {
  pointer-events:none;
}
table tr :last-child {
  pointer-events:auto;
  cursor: pointer;
}

Upvotes: 8

GRIM2D
GRIM2D

Reputation: 11

var nameOfRows = "row"
//useful when there are other tables in your document.
//use like this
//<table>
//...<tr name="row">...</tr><tr name="row">...</tr>...
var backgroundOriginal = "#ffffff"; //background when the row isn't selected
var backgroundHover = "#ff0000"; //background when the row is selected;

function setHigh (id)
{
     var rows = document.getElementsByName(nameOfRows);
     for (var i = 0; i < rows.length; i++)
     {
           rows[i].style.background = backgroundOriginal;
     }
     for (i = 0; i <= id; i++) {
          rows[i].style.background = backgroundHover;
     }
}

for (var i = 0; i < document.getElementsByName(nameOfRows).length; i++)
{
     document.getElementsByName(nameOfRows)[i].onmouseover = setHigh(i);
}

Try this out. I've not tested it yet, but I think it should work!

Upvotes: -1

epascarello
epascarello

Reputation: 207501

Since there is not previous selector, you need to sort of do the opposite. Add a hove to the tbody and chnage the color of the rows after the row that was chosen.

HTML:

<table class="hovTable">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
        <tr>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 7</td>
            <td>Data 8</td>
        </tr>
    </tbody>
</table>

CSS:

.hovTable, tr, td, th {
    border-collapse: collapse;
    border: 1px solid black;    
}

.hovTable tbody td {
    background-color: #FFF;    
}

.hovTable tbody:hover td {
    background-color: #CCC;    
}

.hovTable tbody:hover tr:hover ~ tr td {
    background-color: #FFF;    
}

Example:

JSFiddle

References:

General Sibling Selector

Upvotes: 2

Thomas Laier Pedersen
Thomas Laier Pedersen

Reputation: 449

Try this: (fiddle: http://jsfiddle.net/5SLN3/)

$('tr').hover(
    function(){
        $(this).addClass('hover').prevAll().addClass('hover');
    },
    function(){
        $(this).removeClass('hover').prevAll().removeClass('hover');
    }
)

and the style:

<style>
tr.hover td{background-color:#888}
</style>

Upvotes: 2

Related Questions