Dateigrösse: 3.74 kb
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5 <!-- http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited --> 6 7 <title>CSS sortable Tables</title> 8 9 <script type="text/javascript" src="css/tablesort.js"></script> 10 <script type="text/javascript" src="css/paginate.js"></script> 11 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 12 <link rel="stylesheet" type="text/css" href="css/styles.css" /> 13 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 14 </head> 15 16 <body> 17 18 <h3>CSS TableStyle</h3> 19 20 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" style="border:0"> 21 <caption>Table 1: Power Mac G5 tech specs </caption> 22 <tr> 23 <th scope="col" abbr="Configurations" class="nobg">Configurations</th> 24 <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> 25 <th scope="col" abbr="Dual 2">Dual 2GHz</th> 26 <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> 27 </tr> 28 <tr> 29 <th scope="row" abbr="Model" class="spec">Model</th> 30 <td>M9454LL/A</td> 31 <td>M9455LL/A</td> 32 <td>M9457LL/A</td> 33 </tr> 34 <tr> 35 <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th> 36 <td class="alt">Dual 1.8GHz PowerPC G5</td> 37 <td class="alt">Dual 2GHz PowerPC G5</td> 38 <td class="alt">Dual 2.5GHz PowerPC G5</td> 39 </tr> 40 <tr> 41 <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th> 42 <td>900MHz per processor</td> 43 <td>1GHz per processor</td> 44 <td>1.25GHz per processor</td> 45 </tr> 46 <tr> 47 <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th> 48 <td class="alt">512K per processor</td> 49 <td class="alt">512K per processor</td> 50 <td class="alt">512K per processor</td> 51 </tr> 52 </table> 53 54 <br /> 55 <hr /> 56 57 <h3>TableSort (revisited) demo</h3> 58 <h4>JavaScript initiated sort test</h4> 59 60 <p><code>class="rowstyle-alt colstyle-alt no-arrow"</code></p> 61 <table id="test1" cellpadding="0" cellspacing="0" border="0" class="rowstyle-alt colstyle-alt no-arrow"> 62 <thead> 63 <tr> 64 <th class="sortable-text">First Name</th> 65 <th class="sortable-text">Last Name</th> 66 <th class="sortable-numeric">Age</th> 67 <th class="sortable-numeric">Score</th> 68 </tr> 69 </thead> 70 <tbody> 71 <tr> 72 <td>Peter</td> 73 <td>Friel</td> 74 <td>37</td> 75 <td>20%</td> 76 </tr> 77 <tr class="alt"> 78 <td>Robert</td> 79 <td>Preen</td> 80 <td>33</td> 81 <td>25%</td> 82 </tr> 83 <tr> 84 <td>Peter</td> 85 <td>Lords</td> 86 <td>18</td> 87 <td>78%</td> 88 </tr> 89 <tr class="alt"> 90 <td>Peter</td> 91 <td>Just</td> 92 <td>18</td> 93 <td>44%</td> 94 </tr> 95 <tr> 96 <td>Freddy</td> 97 <td>Cummins</td> 98 <td>17</td> 99 <td>52%</td> 100 </tr> 101 </tbody> 102 </table> 103 104 <form action="" method="post"> 105 <p> 106 <button type="button" name="b1" onclick="fdTableSort.jsWrapper('test1', [0,3])">Sort columns 0 & 3</button> 107 <button type="button" name="b2" onclick="fdTableSort.jsWrapper('test1', [0,2])">Sort columns 0 & 2</button> 108 <button type="button" name="b3" onclick="fdTableSort.jsWrapper('test1', [0])">Sort column 0</button> 109 </p> 110 </form> 111 112 <p>TableSort jQuery<a href="http://tablesorter.com/docs/index.html">Tablesorter</a></p> 113 114 <br /> 115 <hr /> 116 117 </body> 118 </html> 119