2015-02-11 19:18:04 +00:00
<!DOCTYPE html>
< html >
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter 2.0 - CSS Column & Row Highlights< / title >
2015-02-11 19:18:04 +00:00
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< style >
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.block {
width: 33.3%;
float: left;
padding: 10px;
}
@media all and (max-width: 1300px) {
.block { width: 50%; }
}
@media all and (max-width: 900px) {
.block { float: none; width: 100%; }
}
.hover-hl { color: #990; }
.focus-hl { color: #3aa3c5; }
< / style >
< style id = "css" > / * T A B L E B A C K G R O U N D c o l o r ( m a t c h t h e o r i g i n a l t h e m e ) * /
table.hover-highlight td:before,
table.focus-highlight td:before {
background: #fff;
}
/* ODD ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .odd td:before, .hover-highlight .odd th:before,
.focus-highlight .odd td:before, .focus-highlight .odd th:before {
background: #ebf2fa;
}
/* EVEN ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .even td:before, .hover-highlight .even th:before,
.focus-highlight .even td:before, .focus-highlight .even th:before {
background-color: #fff;
}
/* FOCUS ROW highlight color (touch devices) */
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
background-color: lightblue;
}
/* FOCUS COLUMN highlight color (touch devices) */
.focus-highlight td:focus::after, .focus-highlight th:focus::after {
background-color: lightblue;
}
/* FOCUS CELL highlight color */
.focus-highlight th:focus, .focus-highlight td:focus,
.focus-highlight .even th:focus, .focus-highlight .even td:focus,
.focus-highlight .odd th:focus, .focus-highlight .odd td:focus {
background-color: #d9d9d9;
color: #333;
}
/* HOVER ROW highlight colors */
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
table.hover-highlight tbody > tr.odd:hover > td,
table.hover-highlight tbody > tr.even:hover > td {
background-color: #ffa;
}
/* HOVER COLUMN highlight colors */
.hover-highlight tbody tr td:hover::after,
.hover-highlight tbody tr th:hover::after {
background-color: #ffa;
}
/* ************************************************* */
/* **** No need to modify the definitions below **** */
/* ************************************************* */
.focus-highlight td:focus::after, .focus-highlight th:focus::after,
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
content: '';
position: absolute;
width: 100%;
height: 999em;
left: 0;
top: -555em;
z-index: -1;
}
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
content: '';
position: absolute;
width: 999em;
height: 100%;
left: -555em;
top: 0;
z-index: -2;
}
/* required styles */
.hover-highlight,
.focus-highlight {
overflow: hidden;
}
.hover-highlight td, .hover-highlight th,
.focus-highlight td, .focus-highlight th {
position: relative;
outline: 0;
}
/* override the tablesorter theme styling */
table.hover-highlight, table.hover-highlight tbody > tr > td,
table.focus-highlight, table.focus-highlight tbody > tr > td,
/* override zebra styling */
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td,
table.focus-highlight tbody tr.even > th,
table.focus-highlight tbody tr.even > td,
table.focus-highlight tbody tr.odd > th,
table.focus-highlight tbody tr.odd > td {
background: transparent;
}
/* table background positioned under the highlight */
table.hover-highlight td:before,
table.focus-highlight td:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -3;
}< / style >
< script id = "js" > $ ( f u n c t i o n ( ) {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue'
});
// Make table cell focusable
// http://css-tricks.com/simple-css-row-column-highlighting/
if ( $('.focus-highlight').length ) {
$('.focus-highlight').find('td, th')
.attr('tabindex', '1')
// add touch device support
.on('touchstart', function() {
$(this).focus();
});
}
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > CSS Column & Row Highlights< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
< em > NOTE!< / em >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
< li > The css in this demo only works with < a href = "http://caniuse.com/#feat=css-gencontent" > modern browsers< / a > (IE9+).< / li >
< li > This css is originally from this < a href = "http://css-tricks.com/simple-css-row-column-highlighting/" > CSS-Tricks< / a > article; it has been modified to work with tablesorter themes.< / li >
< li >
It does not work properly on cells with < code > rowspan< / code > or < code > colspan< / code > within the < code > tbody< / code > (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns & rows, then take a look at the < a href = "https://github.com/gajus/wholly" > wholly< / a > plugin.
< p > < / p >
< / li >
< li > To add < strong class = "hover-hl" > Hover< / strong > Highlighting:
< ul >
< li > Add a class name of < code > " < span class = "hover-hl" > hover-highlight< / span > " < / code > to enable hover row and column highlighting.< / li >
< li > Include the CSS shown on this page.< / li >
< li > If needed, modify the table background color & zebra striping row colors.< / li >
< li > Modify the hover highlight row and/or column color definitions as desired (they can be different colors).< / li >
< / ul >
< p > < / p >
< / li >
< li > To add < strong class = "focus-hl" > Focus< / strong > Highlighting:
< ul >
< li > Add a class name of < code > " < span class = "focus-hl" > focus-highlight< / span > " < / code > to enable focused cell with row and column highlighting.< / li >
< li > Click on a table cell in the demo below to see the highlight; only < em > one element< / em > , per page, can be active at a time.< / li >
< li > Include the CSS and the extra javascript shown on this page to make table cells focusable.< / li >
< li > If needed, modify the table background color & zebra striping row colors.< / li >
< li > Modify the focus highlight row and/or column color definitions as desired (they can be different colors).< / li >
< / ul >
< / li >
< / ul >
2015-02-11 19:18:04 +00:00
< h1 > Demo< / h1 >
< div id = "demo" >
< div class = "block" >
< h1 > < span class = "hover-hl" > Hover< / span > + < span class = "focus-hl" > Focus< / span > Highlight< / h1 >
< table class = "tablesorter hover-highlight focus-highlight" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "block" >
< h1 > < span class = "hover-hl" > Hover< / span > Highlight Only< / h1 >
< table class = "tablesorter hover-highlight" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "block" >
< h1 > < span class = "focus-hl" > Focus< / span > Highlight Only < small > (click on a tbody cell)< / small > < / h1 >
< table class = "tablesorter focus-highlight" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "block" >
< h1 > Zebra + < span class = "hover-hl" > Hover< / span > + < span class = "focus-hl" > Focus< / span > Highlight< / h1 >
< table class = "tablesorter hover-highlight focus-highlight widget-zebra" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "block" >
< h1 > Zebra + < span class = "hover-hl" > Hover< / span > Highlight Only< / h1 >
< table class = "tablesorter hover-highlight widget-zebra" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "block" >
< h1 > Zebra + < span class = "focus-hl" > Focus< / span > Highlight Only < small > (click on a tbody cell)< / small > < / h1 >
< table class = "tablesorter focus-highlight widget-zebra" >
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 2.89< / td > < td > 44.2%< / td > < td > -15< / td > < / tr >
< tr > < td > A1< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > $153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A256< / td > < td > John< / td > < td > Clark< / td > < td > 44< / td > < td > ($19.89)< / td > < td > 25.1%< / td > < td > (5)< / td > < / tr >
< tr > < td > A23< / td > < td > Elvis< / td > < td > Presley< / td > < td > 24< / td > < td > ($9.99)< / td > < td > 50%< / td > < td > (22)< / td > < / tr >
< tr > < td > A10< / td > < td > Frank< / td > < td > Carter< / td > < td > 40< / td > < td > -12.99< / td > < td > 20%< / td > < td > (6)< / td > < / tr >
< / tbody >
< / table >
< / div >
< / div >
< br class = "clear" / >
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< / div >
< script >
/* highlight hover & focus selectors in the syntax highlighted code */
2015-07-15 02:17:57 +00:00
$(window).on('load', function(){
2015-02-11 19:18:04 +00:00
setTimeout(function(){
// css
$('.pln:contains(highlight)').each(function(){
var $this = $(this),
$prev = $this.prev().prev(),
text = $prev.text() || '',
type = /hover/.test(text) ? 'hover-hl' : /focus/.test(text) ? 'focus-hl' : '';
if (type) {
$this.html(function(i,h){
return h.replace('highlight', '< span > highlight< / span > ');
});
// "highlight".. "-" .... "hover"/"focus" ... "."
$this.find('span').add( $prev ).add( $this.prev() ).add( $prev.prev() ).addClass(type);
}
});
// js
$('.str:contains(focus-highlight)').addClass('focus-hl');
}, 500);
});
< / script >
< / body >
< / html >
