Created
June 27, 2012 08:34
-
-
Save hkirsman/3002480 to your computer and use it in GitHub Desktop.
turn tables into mobile friendly
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" | |
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>table</title> | |
<style type="text/css"> | |
.odd { background-color: #808080; } | |
.generated_for_mobile { margin-bottom: 30px } | |
</style> | |
</head> | |
<body> | |
<table> | |
<thead> | |
<tr> | |
<th>First Name</th> | |
<th>Last Name</th> | |
<th>Job Title</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>James</td> | |
<td>Matman</td> | |
<td>Chief Sandwich Eater</td> | |
</tr> | |
<tr> | |
<td>The</td> | |
<td>Tick</td> | |
<td>Crimefighter Sorta</td> | |
</tr> | |
</tbody> | |
</table> | |
<table> | |
<thead> | |
<tr> | |
<th>First Name</th> | |
<th>Last Name</th> | |
<th>Job Title</th> | |
<th>Favorite Color</th> | |
<th>Wars or Trek?</th> | |
<th>Porn Name</th> | |
<th>Date of Birth</th> | |
<th>Dream Vacation City</th> | |
<th>GPA</th> | |
<th>Arbitrary Data</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>James</td> | |
<td>Matman</td> | |
<td>Chief Sandwich Eater</td> | |
<td>Lettuce Green</td> | |
<td>Trek</td> | |
<td>Digby Green</td> | |
<td>January 13, 1979</td> | |
<td>Gotham City</td> | |
<td>3.1</td> | |
<td>RBX-12</td> | |
</tr> | |
<tr> | |
<td>The</td> | |
<td>Tick</td> | |
<td>Crimefighter Sorta</td> | |
<td>Blue</td> | |
<td>Wars</td> | |
<td>John Smith</td> | |
<td>July 19, 1968</td> | |
<td>Athens</td> | |
<td>N/A</td> | |
<td>Edlund, Ben (July 1996).</td> | |
</tr> | |
<tr> | |
<td>Jokey</td> | |
<td>Smurf</td> | |
<td>Giving Exploding Presents</td> | |
<td>Smurflow</td> | |
<td>Smurf</td> | |
<td>Smurflane Smurfmutt</td> | |
<td>Smurfuary Smurfteenth, 1945</td> | |
<td>New Smurf City</td> | |
<td>4.Smurf</td> | |
<td>One</td> | |
</tr> | |
<tr> | |
<td>Cindy</td> | |
<td>Beyler</td> | |
<td>Sales Representative</td> | |
<td>Red</td> | |
<td>Wars</td> | |
<td>Lori Quivey</td> | |
<td>July 5, 1956</td> | |
<td>Paris</td> | |
<td>3.4</td> | |
<td>3451</td> | |
</tr> | |
<tr> | |
<td>Captain</td> | |
<td>Cool</td> | |
<td>Tree Crusher</td> | |
<td>Blue</td> | |
<td>Wars</td> | |
<td>Steve 42nd</td> | |
<td>December 13, 1982</td> | |
<td>Las Vegas</td> | |
<td>1.9</td> | |
<td>Under the couch</td> | |
</tr> | |
</tbody> | |
</table> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
// generate mobile version for each table | |
$('table').each(function() { | |
var table = $(this); // cache table object | |
var head = table.find('thead th'); | |
var rows = table.find('tbody tr').clone(); // appending afterwards does not break original table | |
// create new table | |
var newtable = $( | |
'<table class="generated_for_mobile">' + | |
' <tbody>' + | |
' </tbody>' + | |
'</table>' | |
); | |
// cache tbody where we'll be adding data | |
var newtable_tbody = newtable.find('tbody'); | |
rows.each(function(i) { | |
var cols = $(this).find('td'); | |
var classname = i % 2 ? 'even' : 'odd'; | |
cols.each(function(k) { | |
var new_tr = $('<tr class="' + classname + '"></tr>').appendTo(newtable_tbody); | |
new_tr.append(head.clone().get(k)); | |
new_tr.append($(this)); | |
}); | |
}); | |
$(this).after(newtable); | |
}); | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment