I was working on a project recently that had a pricing grid that I felt was hard to follow, I solution I decided on to make it more clear was to highlight the current cell that was being hovered, but also highlight the row and the column so that the user can clearly see the x,y axis for the hovered cell.
The resulting code works pretty well and can be seen below:
When hovering the heading along the top or down the left, the highlighter will not work – as you would expect!
Here is the HTML, JavaScript and CSS to get the example working. You will need jQuery, I used V1.9.0 but any version should be ok.
HTML
<table class="pricing" id="pricing"> <tr> <th style="width:90px;height:50px"></th> <th style="width:100px;">up to 250</th> <th style="width:100px;">up to 500</th> <th style="width:100px;">up to 1500</th> <th style="width:100px;">up to 5000</th> <th style="width:100px;">5001+</th> </tr> <tr style="display:none;"> <th></th> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th style="height:100px">up to 5</th> <td>£</td> <td>£</td> <td>£</td> <td>£</td> <td>£</td> </tr> <tr> <th style="height:100px">up to 15</th> <td>£</td> <td>£</td> <td>£</td> <td>£</td> <td>£</td> </tr> <tr> <th style="height:100px">up to 40</th> <td>£</td> <td>£</td> <td>£</td> <td>£</td> <td>£</td> </tr> <tr> <th style="height:100px">up to 80</th> <td>£</td> <td>£</td> <td>£</td> <td>£</td> <td>£</td> </tr> <tr> <th style="height:100px">81+</th> <td>£</td> <td>£</td> <td>£</td> <td>£</td> <td>£</td> </tr> </table>
CSS
table.pricing td, table.pricing th{
text-align:center;
padding:5px;
border:0px;
}
table.pricing th{
background-color:#cfe3f9;
border: 1px solid #cfe3f9;
}
table.pricing {
border:0px;
border-collapse: separate;
border-spacing: 0px;
}
.cur_col {
background-color:#E6F2FF !important;
border:1px solid #E6F2FF !important;
border-left:1px solid #CFE3F9 !important;
border-right:1px solid #CFE3F9 !important;
}
.cur_cell {
background-color:#fff0a5 !important;
border:1px solid #fff0a5 !important;
border:1px solid #CFE3F9 !important;
}
.cur_row {
background-color:#E6F2FF !important;
border:1px solid #E6F2FF !important;
border-top:1px solid #CFE3F9 !important;
border-bottom:1px solid #CFE3F9 !important;
}
JavaScript (+jQuery)
<script >
function inittbletohoverHighlight() {
if (tbletohover==null) {
return;
}
// detect cursor position
for(var i=0; i<tbletohover.rows.length; i++) {
tbletohover.rows[i].row_index=i;
for(var j=0; j<tbletohover.rows[i].cells.length; j++) {
tbletohover.rows[i].cells[j].column_index=j;
tbletohover.rows[i].cells[j].onmouseover=function() {
highlight(this.parentNode.row_index, this.column_index, 'on');
}
tbletohover.rows[i].cells[j].onmouseout=function() {
highlight(this.parentNode.row_index, this.column_index, 'off');
}
}
}
}
function highlight(row, col, state) {
if (row == 0 || col == 0) {
return;
}
for(var i=0; i<tbletohover.rows.length; i++) {
if(state=='off') {
for(var j=0; j<tbletohover.rows[i].cells.length; j++) {
tbletohoverElement = tbletohover.rows[i].cells[j]
$(tbletohoverElement).removeClass('cur_col');
}
}
if(state=='on') {
tbletohoverElement = tbletohover.rows[i].cells[col]
$(tbletohoverElement).addClass('cur_col');
}
}
for(var i=0; i<tbletohover.rows[row].cells.length; i++) {
if(state=='on') {
tbletohoverElement = tbletohover.rows[row].cells[i]
$(tbletohoverElement).addClass('cur_row');
tbletohoverElement = tbletohover.rows[row].cells[col]
$(tbletohoverElement).removeClass('cur_row');
$(tbletohoverElement).removeClass('cur_col');
$(tbletohoverElement).addClass('cur_cell');
}
if(state=='off') {
tbletohoverElement = tbletohover.rows[row].cells[i]
$(tbletohoverElement).removeClass('cur_row');
tbletohoverElement = tbletohover.rows[row].cells[col]
$(tbletohoverElement).removeClass('cur_cell');
}
}
}
var tbletohover = document.getElementById('pricing');
inittbletohoverHighlight();
</script>
As always please drop your comments, suggestions and recommendations below:
Twitter
Facebook
Linkedin