Differences

This shows you the differences between two versions of the page.

--- animals [2020/03/19 11:44]
saph
+++ animals [2020/03/25 00:04]
saph Allowed for sorting the animals table by the different columns
@@ Line 94: / Line 94: @@
   <thead>
     <tr>
-      <th scope="col">Name</th>
+            <th onclick="sortTable(0, 'animalTable')" scope="col">Name</th>
-	  <th scope="col">HP</th>
+            <th onclick="sortTable(1, 'animalTable')" scope="col">HP</th>
-      <th scope="col">Agg</th>
+            <th onclick="sortTable(2, 'animalTable')" scope="col">Agg</th>
-      <th scope="col">Pow</th>
+            <th onclick="sortTable(3, 'animalTable')" scope="col">Pow</th>
-      <th scope="col">Mount</th>
+            <th onclick="sortTable(4, 'animalTable')" scope="col">Mount</th>
-	  <th scope="col">Herd</th>
+            <th onclick="sortTable(5, 'animalTable')" scope="col">Herd</th>
-      <th scope="col">Meat</th>
+            <th onclick="sortTable(6, 'animalTable')" scope="col">Meat</th>
-	  <th scope="col">Fur</th>
+            <th onclick="sortTable(7, 'animalTable')" scope="col">Fur</th>
-	  <th scope="col">Hide</th>
+            <th onclick="sortTable(8, 'animalTable')" scope="col">Hide</th>
-	  <th scope="col">Wool</th>
+            <th onclick="sortTable(9, 'animalTable')" scope="col">Wool</th>
-	  <th scope="col">Milk</th>
+            <th onclick="sortTable(10, 'animalTable')" scope="col">Milk</th>
-	  <th scope="col">Eggs</th>
+            <th onclick="sortTable(11, 'animalTable')" scope="col">Eggs</th>
-	  <th scope="col">Honey</th>
+            <th onclick="sortTable(12, 'animalTable')" scope="col">Honey</th>
     </tr>
   </thead>
@@ Line 241: / Line 241: @@
 </table>
 </div>
+<script type="text/javascript">/*<![CDATA[*/
+function sortTable(n, tableId) {
+    var shouldSwitch, switchCount = 0;
+    var table = document.getElementById(tableId);
+    var switching = true;
+    var dir = "asc";
+    while (switching) {
+        switching = false;
+        var rows = table.rows;
+        for (var i = 1; i < (rows.length - 1); i++) {
+            shouldSwitch = false;
+            var x = rows[i].getElementsByTagName("TD")[n];
+            var y = rows[i + 1].getElementsByTagName("TD")[n];
+            if (dir == "asc") {
+                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+                    shouldSwitch = true;
+                    break;
+                }
+            } else if (dir == "desc") {
+                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+                    shouldSwitch = true;
+                    break;
+                }
+            }
+        }
+        if (shouldSwitch) {
+            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+            switching = true;
+            switchCount++;
+        } else {
+            if (switchCount == 0 && dir == "asc") {
+                dir = "desc";
+                switching = true;
+            }
+        }
+    }
+}
+/*!]]>*/</script>
 </html>