diff options
| author | Kyle K <kylek389@gmail.com> | 2013-06-15 19:52:17 -0500 |
|---|---|---|
| committer | Kyle Kaminski <kyle@kkaminsk.com> | 2013-06-15 19:52:17 -0500 |
| commit | f5f461aaf9f08951fa3990e49b51a076f7036b16 (patch) | |
| tree | deaf01c5633ef17b885d00546e7ea085ab1d1652 /jquery-striped-table.xhtml | |
| download | websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.tar.gz websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.tar.bz2 websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.zip | |
initial commit
Diffstat (limited to 'jquery-striped-table.xhtml')
| -rw-r--r-- | jquery-striped-table.xhtml | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/jquery-striped-table.xhtml b/jquery-striped-table.xhtml new file mode 100644 index 0000000..7d72650 --- /dev/null +++ b/jquery-striped-table.xhtml @@ -0,0 +1,79 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>hello, world!</title> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<style type="text/css"> + table { border: 1px solid gray; font-size: 0.8em } + thead { font-weight: bold } + td { max-width: 400px } + tr, td { border: 1px solid black } + .stripe1 { background-color: #0f0 } + .stripe2 { background-color: #afa } + .highlight { background-color: #ffcc00 } +</style> +<script type="text/javascript" src="jquery-2.0.2.js"></script> +<script type="text/javascript"> +<![CDATA[ + $(function() { + $("p:last").css("border", "2px solid green"); + + $("table tr:even").addClass("stripe1"); + $("table tr:odd").addClass("stripe2"); + + $("#list1 tr").hover(function() { + $(this).toggleClass("highlight"); + }, function() { + $(this).toggleClass("highlight"); + }); + + <!-- this is a jquery wrapped variable? --> + <!-- attach an event to a table instead of to each tr --> + $("#list1").on("click", "tr", function() { + alert($(this).text()); + }); + }); +]]> +</script> +</head> +<body> +<h1>hello, world!</h1> +<table id="list1"> + <thead> + <tr> + <td>OPAMP</td> + <td>Description</td> + <td>Do I own one?</td> + </tr> + </thead> + <tr> + <td>OPA2227</td> + <td>Laid back BB sound, great 80Hz bass, but muddy mids and highs</td> + <td>Yes</td> + </tr> + <tr> + <td>OPA637</td> + <td>Exceptional performance all around. Almost too detailed for music</td> + <td>Yes</td> + </tr> + <tr> + <td>LM4562</td> + <td>I guess it was great? It burned down</td> + <td>No</td> + </tr> + <tr> + <td>NE5532</td> + <td>Sounded alright, but high DC offset!</td> + <td>Yes, 100x</td> + </tr> + <tr> + <td>741</td> + <td>Not for music amplification</td> + <td>Yes</td> + </tr> +</table> +<p>goodbye, world!</p> +</body> +</html> + |