Jump to content

Search the Community

Showing results for tags 'table'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Support
    • Support
    • Common Questions
  • General
    • The Frog Academy
    • General chat
    • Showcase
    • Webinars
  • Technical Forums (How do I...?)
    • Learn / Play / Progress
    • Coding

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Found 1 result

  1. Hi Community, I am just playing with the HTML widget and tables, looking for a way to replace embedding Excel docs with native HTML. I can get the table to display as I want, however, I cannot seem to get the table to 'sort on click' of the header, as described in many various forums. The code I am using is below, and if I copy this into the live editor on w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc) it works a treat. But, it does not seem to function in Frog HTML widget. Any ideas? Thank you in advance for your support. Michael <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 1px; border-color: #e6e6e6; border-style: double; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 1px; border-color: #e6e6e6; border-style: double; padding: 10px; } table.GeneratedTable thead { background-color: #52b9e9; } </style> <table class="GeneratedTable" id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">House</th> <th onclick="sortTable(2)">Tutor</th> <th onclick="sortTable(3)">Achievement</th> <th onclick="sortTable(4)">Behaviour</th> <th onclick="sortTable(5)">Total</th> </tr> </thead> <tbody> <tr> <td>Student 1</td> <td>Bowman</td> <td>ACR</td> <td>1100</td> <td>10</td> <td>1090</td> </tr> <tr> <td>Student 2</td> <td>Fulford</td> <td>ACR</td> <td>1623</td> <td>196</td> <td>1427</td> </tr> <tr> <td>Student 3</td> <td>Netherfield</td> <td>MOB</td> <td>1507</td> <td>198</td> <td>1309</td> </tr> <tr> <td>Student 4</td> <td>Saunderson</td> <td>MOB</td> <td>1920</td> <td>326</td> <td>1594</td> </tr> <tr> <td>Student 5</td> <td>Weirfield</td> <td>RBA</td> <td>1835</td> <td>85</td> <td>1750</td> </tr> <tr> <td>Student 6</td> <td>Bowman</td> <td>RBA</td> <td>1634</td> <td>320</td> <td>1314</td> </tr> <tr> <td>Student 7</td> <td>Fulford</td> <td>AHI</td> <td>1470</td> <td>503</td> <td>967</td> </tr> <tr> <td>Student 8</td> <td>Netherfield</td> <td>AHI</td> <td>2036</td> <td>337</td> <td>1699</td> </tr> <tr> <td>Student 9</td> <td>Saunderson</td> <td>AHU</td> <td>1342</td> <td>134</td> <td>1208</td> </tr> <tr> <td>Student 10</td> <td>Weirfield</td> <td>AHU</td> <td>1575</td> <td>247</td> <td>1328</td> </tr> <tr> <td>Student 11</td> <td>Bowman</td> <td>GUN</td> <td>1575</td> <td>170</td> <td>1405</td> </tr> <tr> <td>Student 12</td> <td>Fulford</td> <td>GUN</td> <td>1416</td> <td>200</td> <td>1216</td> </tr> <tr> <td>Student 13</td> <td>Netherfield</td> <td>FNA</td> <td>1991</td> <td>488</td> <td>1503</td> </tr> <tr> <td>Student 14</td> <td>Saunderson</td> <td>FNA</td> <td>1596</td> <td>90</td> <td>1506</td> </tr> <tr> <td>Student 15</td> <td>Weirfield</td> <td>HTA</td> <td>1553</td> <td>188</td> <td>1365</td> </tr> <tr> <td>Student 16</td> <td>Bowman</td> <td>HTA</td> <td>1570</td> <td>277</td> <td>1293</td> </tr> <tr> <td>Student 17</td> <td>Fulford</td> <td>DRO</td> <td>1444</td> <td>414</td> <td>1030</td> </tr> <tr> <td>Student 18</td> <td>Netherfield</td> <td>DRO</td> <td>1702</td> <td>367</td> <td>1335</td> </tr> <tr> <td>Student 19</td> <td>Saunderson</td> <td>SPK</td> <td>2027</td> <td>387</td> <td>1640</td> </tr> <tr> <td>Student 20</td> <td>Weirfield</td> <td>SPK</td> <td>1512</td> <td>140</td> <td>1372</td> </tr></tbody> </table> <script> function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.getElementsByTagName("TR"); /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /*check if the two rows should switch place, based on the direction, asc or desc:*/ if (dir === "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } else if (dir === "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; //Each time a switch is done, increase this count by 1: switchcount ++; } else { /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/ if (switchcount === 0 && dir === "asc") { dir = "desc"; switching = true; } } } } </script>
  • Create New...