Skip to content

Instantly share code, notes, and snippets.

@rfessler

rfessler/application.js

Created November 5, 2012 17:56
Show Gist options
  • Save rfessler/4019203 to your computer and use it in GitHub Desktop.
Save rfessler/4019203 to your computer and use it in GitHub Desktop.
Download ZIP
Tables - jquery sorting and filtering
Raw
readme.md
Raw
application.js
$(document).ready(function() {
zebraRows('tr:odd td', 'odd');
$('tbody tr').hover(function(){
$(this).find('td').addClass('hovered');
}, function(){
$(this).find('td').removeClass('hovered');
});
//default each row to visible
$('tbody tr').addClass('visible');
//overrides CSS display:none property
//so only users w/ JS will see the
//filter box
$('#search').show();
$('#filter').keyup(function(event) {
//if esc is pressed or nothing is entered
if (event.keyCode === 27 || $(this).val() === '') {
//if esc is pressed we want to clear the value of search box
$(this).val('');
//we want each row to be visible because if nothing
//is entered then all rows are matched.
$('tbody tr').removeClass('visible').show().addClass('visible');
}
//if there is text, lets filter
else {
filter('tbody tr', $(this).val());
}
//reapply zebra rows
$('.visible td').removeClass('odd');
zebraRows('.visible:even td', 'odd');
});
//grab all header rows
$('thead th').each(function(column) {
$(this).addClass('sortable')
.click(function(){
var findSortKey = function($cell) {
return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
};
var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
//step back up the tree and get the rows with data
//for sorting
var $rows = $(this).parent()
.parent()
.parent()
.find('tbody tr')
.get();
//loop through all the rows and find
$.each($rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
//compare and sort the rows alphabetically
$rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
//add the rows in the correct order to the bottom of the table
$.each($rows, function(index, row) {
$('tbody').append(row);
row.sortKey = null;
});
//identify the column sort order
$('th').removeClass('sorted-asc sorted-desc');
var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');
//identify the column to be sorted by
$('td').removeClass('sorted')
.filter(':nth-child(' + (column + 1) + ')')
.addClass('sorted');
$('.visible td').removeClass('odd');
zebraRows('.visible:even td', 'odd');
});
});
});
//used to apply alternating row styles
function zebraRows(selector, className)
{
$(selector).removeClass(className)
.addClass(className);
}
//filter results based on query
function filter(selector, query) {
query = $.trim(query); //trim white space
query = query.replace(/ /gi, '|'); //add OR for regex
$(selector).each(function() {
($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
});
}
Raw
default.html
<!--ref: http://net.tutsplus.com/tutorials/javascript-ajax/using-jquery-to-manipulate-and-filter-data/-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Display Data Using jQuery</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/application.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="index">
<div id="pagewrap">
<div id="search">
<label for="filter">Filter</label> <input type="text" name="filter" value="" id="filter" />
</div>
<div id="body">
<table cellpadding="1" cellspacing="1" id="resultTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr><td>Mannix</td><td>Bolton</td><td>Merizo</td><td>Michigan</td></tr>
<tr><td>Suki</td><td>King</td><td>Fairmont</td><td>Oklahoma</td></tr>
<tr><td>Shelby</td><td>English</td><td>Durham</td><td>Arkansas</td></tr>
<tr><td>Portia</td><td>Burns</td><td>Princeton</td><td>Rhode Island</td></tr>
<tr><td>Dacey</td><td>Young</td><td>Covina</td><td>South Carolina</td></tr>
<tr><td>Clark</td><td>Reyes</td><td>Grand Rapids</td><td>New Jersey</td></tr>
<tr><td>Maris</td><td>Decker</td><td>Sierra Madre</td><td>Georgia</td></tr>
<tr><td>Yuli</td><td>Blackwell</td><td>Clearwater</td><td>Illinois</td></tr>
<tr><td>Carly</td><td>Burks</td><td>Beaumont</td><td>Massachusetts</td></tr>
<tr><td>Chloe</td><td>Christian</td><td>Gadsden</td><td>Virginia</td></tr>
<tr><td>Trevor</td><td>Carrillo</td><td>West Bend</td><td>Connecticut</td></tr>
<tr><td>Azalia</td><td>Gallegos</td><td>Plainfield</td><td>Michigan</td></tr>
<tr><td>Jamal</td><td>Blair</td><td>Centennial</td><td>Indiana</td></tr>
<tr><td>Sacha</td><td>Evans</td><td>Grand Island</td><td>Alabama</td></tr>
<tr><td>Cain</td><td>Chapman</td><td>Ontario</td><td>Georgia</td></tr>
<tr><td>Sigourney</td><td>Hendrix</td><td>Riverside</td><td>Florida</td></tr>
<tr><td>Nigel</td><td>Boyle</td><td>Lake Forest</td><td>North Carolina</td></tr>
<tr><td>Ifeoma</td><td>Pruitt</td><td>Mankato</td><td>Connecticut</td></tr>
<tr><td>Ivory</td><td>Mcclure</td><td>East Lansing</td><td>New Jersey</td></tr>
<tr><td>Kato</td><td>Higgins</td><td>Chandler</td><td>Utah</td></tr>
<tr><td>Nasim</td><td>Alvarado</td><td>Morrison</td><td>Louisiana</td></tr>
<tr><td>Caryn</td><td>Crosby</td><td>Nogales</td><td>Virginia</td></tr>
<tr><td>Winter</td><td>Middleton</td><td>Laramie</td><td>Michigan</td></tr>
<tr><td>Nasim</td><td>Snow</td><td>Annapolis</td><td>Hawaii</td></tr>
<tr><td>Ciaran</td><td>Noel</td><td>Midwest City</td><td>Minnesota</td></tr>
<tr><td>Iris</td><td>Williams</td><td>Peekskill</td><td>New Jersey</td></tr>
<tr><td>Bradley</td><td>Faulkner</td><td>St. Marys</td><td>Ohio</td></tr>
<tr><td>Avye</td><td>Stanton</td><td>South Bend</td><td>Oklahoma</td></tr>
<tr><td>Damon</td><td>Nunez</td><td>Inglewood</td><td>Oklahoma</td></tr>
<tr><td>Nayda</td><td>Hendrix</td><td>Whittier</td><td>Oklahoma</td></tr>
<tr><td>Wesley</td><td>Vaughan</td><td>Fort Dodge</td><td>Montana</td></tr>
<tr><td>Lane</td><td>Weeks</td><td>Great Falls</td><td>Illinois</td></tr>
<tr><td>Cheyenne</td><td>Hahn</td><td>Shamokin</td><td>Arizona</td></tr>
<tr><td>Jamalia</td><td>Callahan</td><td>Watervliet</td><td>Iowa</td></tr>
<tr><td>Orla</td><td>Logan</td><td>Manhattan</td><td>Delaware</td></tr>
<tr><td>Mark</td><td>Sheppard</td><td>Orem</td><td>New Mexico</td></tr>
<tr><td>Emerson</td><td>Marshall</td><td>Laramie</td><td>New Jersey</td></tr>
<tr><td>Shelly</td><td>Christian</td><td>Ashland</td><td>Georgia</td></tr>
<tr><td>Leah</td><td>Hayden</td><td>Santa Monica</td><td>Maryland</td></tr>
<tr><td>TaShya</td><td>Stanley</td><td>Moreno Valley</td><td>Tennessee</td></tr>
<tr><td>Iona</td><td>Marquez</td><td>Port Arthur</td><td>Wisconsin</td></tr>
<tr><td>Xena</td><td>Mcmillan</td><td>Memphis</td><td>New York</td></tr>
<tr><td>Blaze</td><td>Wagner</td><td>San Clemente</td><td>New Jersey</td></tr>
<tr><td>Sophia</td><td>House</td><td>Placentia</td><td>Virginia</td></tr>
<tr><td>Burke</td><td>Juarez</td><td>Bakersfield</td><td>West Virginia</td></tr>
<tr><td>Julie</td><td>Shannon</td><td>Rocky Mount</td><td>California</td></tr>
<tr><td>Velma</td><td>Le</td><td>Decatur</td><td>New York</td></tr>
<tr><td>Velma</td><td>Melton</td><td>Bowie</td><td>Mississippi</td></tr>
<tr><td>Flavia</td><td>Mccullough</td><td>Cohoes</td><td>Colorado</td></tr>
<tr><td>Nomlanga</td><td>Williamson</td><td>Newburyport</td><td>Massachusetts</td></tr>
<tr><td>Drew</td><td>Malone</td><td>Hampton</td><td>Kansas</td></tr>
<tr><td>Dennis</td><td>Serrano</td><td>Gloversville</td><td>Alabama</td></tr>
<tr><td>Abel</td><td>Weaver</td><td>Keene</td><td>Hawaii</td></tr>
<tr><td>Victor</td><td>Chambers</td><td>Cypress</td><td>Alaska</td></tr>
<tr><td>Jane</td><td>Gray</td><td>Denver</td><td>New York</td></tr>
<tr><td>Holly</td><td>Greer</td><td>Keene</td><td>Alaska</td></tr>
<tr><td>Fleur</td><td>Frazier</td><td>Gold Beach</td><td>Ohio</td></tr>
<tr><td>Shannon</td><td>Watson</td><td>LaGrange</td><td>Florida</td></tr>
<tr><td>Haviva</td><td>Combs</td><td>Vallejo</td><td>Tennessee</td></tr>
<tr><td>Karly</td><td>Richardson</td><td>Monterey</td><td>Oregon</td></tr>
<tr><td>Connor</td><td>Combs</td><td>Chicopee</td><td>Michigan</td></tr>
<tr><td>Malcolm</td><td>Snyder</td><td>Cortland</td><td>Arkansas</td></tr>
<tr><td>Yvette</td><td>Hays</td><td>Cortland</td><td>Kansas</td></tr>
<tr><td>Selma</td><td>Church</td><td>Attleboro</td><td>Iowa</td></tr>
<tr><td>Adena</td><td>Pace</td><td>Meridian</td><td>Washington</td></tr>
<tr><td>Xyla</td><td>House</td><td>Flagstaff</td><td>Nevada</td></tr>
<tr><td>Bernard</td><td>Rios</td><td>Hannibal</td><td>Illinois</td></tr>
<tr><td>Clayton</td><td>Thomas</td><td>Benton Harbor</td><td>Maryland</td></tr>
<tr><td>Xavier</td><td>Harrington</td><td>Hazleton</td><td>District of Columbia</td></tr>
<tr><td>Jemima</td><td>Allison</td><td>Thiensville</td><td>Montana</td></tr>
<tr><td>Debra</td><td>Lawson</td><td>Alpharetta</td><td>South Dakota</td></tr>
<tr><td>Kevyn</td><td>Roberts</td><td>Truth or Consequences</td><td>Tennessee</td></tr>
<tr><td>Aurelia</td><td>Walton</td><td>Bradford</td><td>Michigan</td></tr>
<tr><td>Florence</td><td>Moss</td><td>Bradbury</td><td>Maryland</td></tr>
<tr><td>Austin</td><td>Guy</td><td>Ketchikan</td><td>Minnesota</td></tr>
<tr><td>Casey</td><td>Vinson</td><td>Merizo</td><td>Arkansas</td></tr>
<tr><td>Stewart</td><td>Freeman</td><td>Whittier</td><td>Vermont</td></tr>
<tr><td>Illana</td><td>Holmes</td><td>Torrance</td><td>Kansas</td></tr>
<tr><td>Dai</td><td>Hebert</td><td>Danville</td><td>Kentucky</td></tr>
<tr><td>Iliana</td><td>Nash</td><td>Lock Haven</td><td>Montana</td></tr>
<tr><td>Kylie</td><td>Mcmillan</td><td>Juneau</td><td>Alabama</td></tr>
<tr><td>Yoshi</td><td>Cline</td><td>Ypsilanti</td><td>Nebraska</td></tr>
<tr><td>Isaac</td><td>Hensley</td><td>Meriden</td><td>Maryland</td></tr>
<tr><td>Michael</td><td>Shaw</td><td>Rawlins</td><td>New Hampshire</td></tr>
<tr><td>Aidan</td><td>Roy</td><td>Minot</td><td>Hawaii</td></tr>
<tr><td>Ignacia</td><td>Murray</td><td>San Luis Obispo</td><td>Washington</td></tr>
<tr><td>Sigourney</td><td>Justice</td><td>San Juan</td><td>Iowa</td></tr>
<tr><td>Simon</td><td>Everett</td><td>Pasadena</td><td>Texas</td></tr>
<tr><td>Uriah</td><td>Forbes</td><td>Davis</td><td>Mississippi</td></tr>
<tr><td>Kathleen</td><td>Carr</td><td>Memphis</td><td>Illinois</td></tr>
<tr><td>Noelani</td><td>Ewing</td><td>Lynchburg</td><td>Indiana</td></tr>
<tr><td>Matthew</td><td>Parker</td><td>Chino Hills</td><td>Michigan</td></tr>
<tr><td>Germane</td><td>Franco</td><td>Brookfield</td><td>Delaware</td></tr>
<tr><td>Lydia</td><td>Aguilar</td><td>Tacoma</td><td>Iowa</td></tr>
<tr><td>Nadine</td><td>Dale</td><td>Chickasha</td><td>Virginia</td></tr>
<tr><td>Stephen</td><td>Holder</td><td>Slidell</td><td>Massachusetts</td></tr>
<tr><td>Kuame</td><td>Calhoun</td><td>Whittier</td><td>Arkansas</td></tr>
<tr><td>Jerry</td><td>Pitts</td><td>Brownsville</td><td>New York</td></tr>
<tr><td>Patience</td><td>Young</td><td>Las Cruces</td><td>Texas</td></tr>
<tr><td>Ayanna</td><td>James</td><td>Champaign</td><td>Wisconsin</td></tr>
<tr><td>Adrian</td><td>Mosley</td><td>Woodruff</td><td>District of Columbia</td></tr>
<tr><td>Moana</td><td>Bates</td><td>Yonkers</td><td>Montana</td></tr>
<tr><td>Myles</td><td>Blankenship</td><td>Naperville</td><td>North Carolina</td></tr>
<tr><td>Aimee</td><td>Camacho</td><td>Tempe</td><td>Connecticut</td></tr>
<tr><td>Aquila</td><td>Stone</td><td>Salem</td><td>Nebraska</td></tr>
<tr><td>Upton</td><td>Miranda</td><td>Covington</td><td>Arkansas</td></tr>
<tr><td>Xenos</td><td>Booker</td><td>Dubuque</td><td>West Virginia</td></tr>
<tr><td>Ria</td><td>Montgomery</td><td>Fort Wayne</td><td>South Carolina</td></tr>
<tr><td>Rafael</td><td>Jordan</td><td>Des Moines</td><td>Maine</td></tr>
<tr><td>Harrison</td><td>Harvey</td><td>Ephraim</td><td>Illinois</td></tr>
<tr><td>Angelica</td><td>Garza</td><td>Idaho Springs</td><td>Tennessee</td></tr>
<tr><td>Cairo</td><td>Raymond</td><td>Lock Haven</td><td>Kentucky</td></tr>
<tr><td>Beck</td><td>Gallegos</td><td>Two Rivers</td><td>Kentucky</td></tr>
<tr><td>Caryn</td><td>Cantrell</td><td>Union City</td><td>Mississippi</td></tr>
<tr><td>Ariana</td><td>Downs</td><td>Irwindale</td><td>Iowa</td></tr>
<tr><td>Kitra</td><td>Oconnor</td><td>Annapolis</td><td>Tennessee</td></tr>
<tr><td>Kitra</td><td>Suarez</td><td>Evanston</td><td>Wisconsin</td></tr>
<tr><td>Cameran</td><td>Bryant</td><td>Laguna Beach</td><td>North Carolina</td></tr>
<tr><td>Emerson</td><td>Rasmussen</td><td>San Angelo</td><td>Georgia</td></tr>
<tr><td>Arden</td><td>Guy</td><td>Derby</td><td>Wisconsin</td></tr>
<tr><td>Carolyn</td><td>Barker</td><td>Boston</td><td>New Hampshire</td></tr>
<tr><td>Olivia</td><td>Campos</td><td>Alexandria</td><td>Pennsylvania</td></tr>
<tr><td>Winter</td><td>Franco</td><td>Spartanburg</td><td>Idaho</td></tr>
<tr><td>Lacy</td><td>Harrison</td><td>Hermitage</td><td>Alaska</td></tr>
<tr><td>Shad</td><td>Gentry</td><td>Sanford</td><td>New York</td></tr>
<tr><td>Tanek</td><td>Orr</td><td>Union City</td><td>Connecticut</td></tr>
<tr><td>Portia</td><td>Finch</td><td>Pierre</td><td>Texas</td></tr>
<tr><td>Ali</td><td>Mcclain</td><td>Alameda</td><td>Arizona</td></tr>
<tr><td>Yen</td><td>Acosta</td><td>North Chicago</td><td>Tennessee</td></tr>
<tr><td>Todd</td><td>Hart</td><td>Normal</td><td>Iowa</td></tr>
<tr><td>Murphy</td><td>Campos</td><td>Rosemead</td><td>Mississippi</td></tr>
<tr><td>Erich</td><td>Hammond</td><td>Knoxville</td><td>Hawaii</td></tr>
<tr><td>Brenda</td><td>William</td><td>San Clemente</td><td>South Dakota</td></tr>
<tr><td>May</td><td>Simpson</td><td>Inglewood</td><td>North Carolina</td></tr>
<tr><td>Paul</td><td>Moran</td><td>Thousand Oaks</td><td>Maine</td></tr>
<tr><td>Brynn</td><td>Foley</td><td>Statesboro</td><td>Rhode Island</td></tr>
<tr><td>Elvis</td><td>Hughes</td><td>Racine</td><td>Arkansas</td></tr>
<tr><td>Joshua</td><td>Griffin</td><td>Galveston</td><td>West Virginia</td></tr>
<tr><td>Rylee</td><td>Bird</td><td>Mesa</td><td>New Mexico</td></tr>
<tr><td>Hashim</td><td>Ellis</td><td>Rancho Palos Verdes</td><td>South Carolina</td></tr>
<tr><td>Madison</td><td>Lowery</td><td>Mission Viejo</td><td>Montana</td></tr>
<tr><td>Alvin</td><td>Moss</td><td>Des Moines</td><td>Vermont</td></tr>
<tr><td>Rylee</td><td>Contreras</td><td>Tampa</td><td>Nevada</td></tr>
<tr><td>Rylee</td><td>Baxter</td><td>New Rochelle</td><td>Delaware</td></tr>
<tr><td>Clare</td><td>Wiley</td><td>Bellingham</td><td>Pennsylvania</td></tr>
<tr><td>Wylie</td><td>Carney</td><td>South Burlington</td><td>Ohio</td></tr>
<tr><td>Rafael</td><td>Gallagher</td><td>Layton</td><td>Kentucky</td></tr>
<tr><td>Iliana</td><td>Hardin</td><td>Lawrenceville</td><td>North Carolina</td></tr>
<tr><td>Travis</td><td>Johnson</td><td>Las Cruces</td><td>South Carolina</td></tr>
<tr><td>Paloma</td><td>Melendez</td><td>Beverly</td><td>Louisiana</td></tr>
<tr><td>Barclay</td><td>Marsh</td><td>Raleigh</td><td>District of Columbia</td></tr>
<tr><td>Faith</td><td>Burton</td><td>Laconia</td><td>District of Columbia</td></tr>
<tr><td>Howard</td><td>Wallace</td><td>Catskill</td><td>Virginia</td></tr>
<tr><td>Yoshi</td><td>Garrett</td><td>Oro Valley</td><td>Minnesota</td></tr>
<tr><td>Whoopi</td><td>Haney</td><td>La Habra Heights</td><td>Michigan</td></tr>
<tr><td>Joseph</td><td>Clayton</td><td>San Dimas</td><td>New Hampshire</td></tr>
<tr><td>Kimberly</td><td>Nielsen</td><td>Bozeman</td><td>Indiana</td></tr>
<tr><td>Illana</td><td>Mcguire</td><td>West Lafayette</td><td>Vermont</td></tr>
<tr><td>Raja</td><td>Fox</td><td>Pembroke Pines</td><td>Virginia</td></tr>
<tr><td>Xyla</td><td>Todd</td><td>Marshfield</td><td>New York</td></tr>
<tr><td>Kasper</td><td>Mcgowan</td><td>Roanoke</td><td>Wyoming</td></tr>
<tr><td>Valentine</td><td>Johns</td><td>Culver City</td><td>Oklahoma</td></tr>
<tr><td>Perry</td><td>Emerson</td><td>Provo</td><td>Texas</td></tr>
<tr><td>Kristen</td><td>Farley</td><td>Cedarburg</td><td>Montana</td></tr>
<tr><td>Teagan</td><td>Fleming</td><td>Lake Charles</td><td>New Jersey</td></tr>
<tr><td>Moses</td><td>Martinez</td><td>Brookings</td><td>Hawaii</td></tr>
<tr><td>Jocelyn</td><td>Price</td><td>Santa Barbara</td><td>Idaho</td></tr>
<tr><td>Scarlet</td><td>Chavez</td><td>Corpus Christi</td><td>Arizona</td></tr>
<tr><td>Demetrius</td><td>Ross</td><td>Charleston</td><td>Wyoming</td></tr>
<tr><td>Neville</td><td>Long</td><td>Vicksburg</td><td>Texas</td></tr>
<tr><td>Belle</td><td>Rasmussen</td><td>Grand Rapids</td><td>New Hampshire</td></tr>
<tr><td>Kylee</td><td>Duke</td><td>Union City</td><td>North Dakota</td></tr>
<tr><td>Brenden</td><td>Chan</td><td>Dana Point</td><td>Washington</td></tr>
<tr><td>Vincent</td><td>Reid</td><td>Minot</td><td>Delaware</td></tr>
<tr><td>Jaden</td><td>Hartman</td><td>Nanticoke</td><td>New Jersey</td></tr>
<tr><td>Dean</td><td>Frazier</td><td>Vallejo</td><td>Florida</td></tr>
<tr><td>Yasir</td><td>Evans</td><td>Union City</td><td>Kansas</td></tr>
<tr><td>Demetria</td><td>Summers</td><td>Bozeman</td><td>District of Columbia</td></tr>
<tr><td>Laurel</td><td>Finley</td><td>Prescott</td><td>South Carolina</td></tr>
<tr><td>Brianna</td><td>Potts</td><td>White Plains</td><td>Ohio</td></tr>
<tr><td>Rae</td><td>Carson</td><td>Elmira</td><td>Maine</td></tr>
<tr><td>Martin</td><td>Miller</td><td>Beaumont</td><td>Nevada</td></tr>
<tr><td>Cynthia</td><td>Lopez</td><td>Berkeley</td><td>Delaware</td></tr>
<tr><td>Ursula</td><td>Hartman</td><td>Richmond</td><td>Alaska</td></tr>
<tr><td>Faith</td><td>Mcmillan</td><td>Spokane</td><td>Alaska</td></tr>
<tr><td>Arden</td><td>Chambers</td><td>Carson City</td><td>Alaska</td></tr>
<tr><td>Adrienne</td><td>Rutledge</td><td>Aguadilla</td><td>Indiana</td></tr>
<tr><td>Quail</td><td>Vinson</td><td>Santa Rosa</td><td>Tennessee</td></tr>
<tr><td>Lynn</td><td>Bell</td><td>Atlanta</td><td>Ohio</td></tr>
<tr><td>Thomas</td><td>Merritt</td><td>Mount Vernon</td><td>North Carolina</td></tr>
<tr><td>Camilla</td><td>Wilkerson</td><td>Edina</td><td>Alabama</td></tr>
<tr><td>Melodie</td><td>Berry</td><td>Chula Vista</td><td>South Carolina</td></tr>
<tr><td>Alec</td><td>Santiago</td><td>Turlock</td><td>Alaska</td></tr>
<tr><td>Barclay</td><td>Rosales</td><td>Ardmore</td><td>Vermont</td></tr>
<tr><td>Keaton</td><td>Lamb</td><td>Pascagoula</td><td>Nevada</td></tr>
<tr><td>Sybil</td><td>Jennings</td><td>Sheboygan</td><td>Mississippi</td></tr>
<tr><td>Jescie</td><td>Miller</td><td>Bradford</td><td>Oregon</td></tr>
<tr><td>Bo</td><td>Head</td><td>Placentia</td><td>Indiana</td></tr>
<tr><td>Richard</td><td>Fowler</td><td>Anderson</td><td>Oklahoma</td></tr>
<tr><td>Brent</td><td>Rowe</td><td>Calabasas</td><td>Delaware</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Raw
style.css
body, html {
background-color: lightblue;
font: normal normal normal 1em/1.5em Helvetica, sans-serif;
}
pre {
font-family: monospace;
}
#pagewrap {
margin: 0 auto;
width: 700px;
}
#search {
-webkit-border-radius: 10px;
background-color: white;
padding: 10px;
position: fixed;
right: 40px;
display: none;
}
#body {
}
table {
background-color: white;
-webkit-border-radius: 10px;
width: 100%;
padding: 10px;
}
th.sortable {
color: #666;
cursor: pointer;
text-decoration: underline;
}
th.sortable:hover {
color: black;
}
th.sorted-asc, th.sorted-desc {
color: black;
}
td {
background-color: white;
}
td.odd {
background-color: #666;
color: white;
}
td.hovered {
background-color: lightblue;
color: #666;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment