Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| 5 <link rel="stylesheet" href="../../../../../../../default.css" type="text/cs s"> | |
|
mikecase (-- gone --)
2016/08/12 18:58:52
can you explain...
href="../../../../../../../def
BigBossZhiling
2016/08/12 21:23:03
This took me some time to figure out. This does no
| |
| 4 <style> | 6 <style> |
| 5 table, th, td { | 7 table, th, td { |
| 6 border: 1px solid black; | 8 border: 1px solid black; |
| 7 border-collapse: collapse; | 9 border-collapse: collapse; |
| 8 } | 10 } |
| 9 th, td { | 11 th, td { |
| 10 padding: 5px; | 12 padding: 5px; |
| 11 } | 13 } |
| 12 th { | 14 th { |
| 13 cursor: pointer; | 15 cursor: pointer; |
| 14 } | 16 } |
| 15 table { | 17 table { |
| 16 width: 100%; | 18 width: 100%; |
| 17 } | 19 } |
| 18 .align-center { | 20 .center { |
| 19 text-align: center; | 21 text-align: center; |
| 20 } | 22 } |
| 21 .algin-left { | 23 .left { |
| 22 text-align: left; | 24 text-align: left; |
| 23 } | 25 } |
| 26 td a { | |
| 27 text-decoration: none; | |
| 28 } | |
| 29 td a:hover { | |
| 30 text-decoration: underline; | |
| 31 cursor: pointer; | |
| 32 } | |
| 33 tr:hover { | |
| 34 background-color: #F6F6F6; | |
| 35 } | |
| 24 </style> | 36 </style> |
| 25 <script type="text/javascript"> | 37 <script type="text/javascript"> |
| 26 function sortByColumn(head) { | 38 function sortByColumn(head) { |
| 27 var tbody = head.parentNode.parentNode.nextElementSibling; | 39 var tbody = head.parentNode.parentNode.nextElementSibling; |
| 28 var rows = tbody.rows; | 40 var rows = tbody.rows; |
| 29 | 41 |
| 30 // Put 'tr' in rows to an array. | 42 // Put 'tr' in rows to an array. |
| 31 var arr = Array.prototype.slice.call(rows); | 43 var arr = Array.prototype.slice.call(rows); |
| 32 | 44 |
| 33 // Determine whether to asc or desc and set arrows. | 45 // Determine whether to asc or desc and set arrows. |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 75 }); | 87 }); |
| 76 | 88 |
| 77 var tmpBody = ""; | 89 var tmpBody = ""; |
| 78 for (var i = 0; i < arr.length; i++) { | 90 for (var i = 0; i < arr.length; i++) { |
| 79 tmpBody += arr[i].outerHTML; | 91 tmpBody += arr[i].outerHTML; |
| 80 } | 92 } |
| 81 tbody.innerHTML = tmpBody; | 93 tbody.innerHTML = tmpBody; |
| 82 } | 94 } |
| 83 </script> | 95 </script> |
| 84 </head> | 96 </head> |
| 85 <body> | 97 <body class="interface"> |
| 86 {% for tb_value in tb_values %} | 98 <div class="content"> |
| 87 {% include 'template/table.html' %} | 99 {% for tb_value in tb_values %} |
| 88 <br> | 100 {% include 'template/table.html' %} |
| 89 <br> | 101 <br> |
| 90 <br> | 102 <br> |
| 91 {% endfor %} | 103 <br> |
| 104 {% endfor %} | |
| 105 </div> | |
| 92 </body> | 106 </body> |
| 93 <script> | 107 <script> |
| 94 Array.prototype.slice.call(document.getElementsByTagName('th')) | 108 Array.prototype.slice.call(document.getElementsByTagName('th')) |
| 95 .forEach(function(head, _) { | 109 .forEach(function(head, _) { |
| 96 head.addEventListener( | 110 head.addEventListener( |
| 97 "click", | 111 "click", |
| 98 function() { sortByColumn(head); }, | 112 function() { sortByColumn(head); }, |
| 99 false | 113 false |
| 100 ); | 114 ); |
| 101 } | 115 } |
| 102 ); | 116 ); |
| 103 </script> | 117 </script> |
| 104 </html> | 118 </html> |
| OLD | NEW |