{"id":1109,"date":"2022-10-17T13:04:44","date_gmt":"2022-10-17T13:04:44","guid":{"rendered":"https:\/\/allabout.cc\/a1\/?page_id=1109"},"modified":"2022-10-17T13:04:44","modified_gmt":"2022-10-17T13:04:44","slug":"1109-2","status":"publish","type":"page","link":"https:\/\/allabout.cc\/a1\/1109-2\/","title":{"rendered":""},"content":{"rendered":"\n<title>Sort a HTML Table Alphabetically<\/title>\n<style>\ntable {\n  border-spacing: 0;\n  width: 100%;\n  border: 1px solid #ddd;\n}\n\nth, td {\n  text-align: left;\n  padding: 16px;\n}\n\ntr:nth-child(even) {\n  background-color: #f2f2f2\n}\n<\/style>\n\n\n\n<p>Click the button to sort the table alphabetically, by name:<\/p>\n<p><button onclick=\"sortTable()\">Sort<\/button><\/p>\n\n<table id=\"myTable\">\n  <tbody><tr>\n    <th>Name<\/th>\n    <th>Country<\/th>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Zee know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>Sweden<\/td>\n  <\/tr>\n  <tr>\n    <td>North\/South<\/td>\n    <td>UK<\/td>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Ama know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>Germany<\/td>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Bi know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>Germany<\/td>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Jas know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>Italy<\/td>\n  <\/tr>\n  <tr>\n    <td>Paris specialites<\/td>\n    <td>France<\/td>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Ind know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>UK<\/td>\n  <\/tr>\n  <tr>\n    <td><div class=\"chip\">\n  <img loading=\"lazy\" src=\"https:\/\/www.original.directory\/d\/sites\/default\/files\/styles\/medium\/public\/2022-07\/Screenshot_20220628-095540__01.jpg?itok=cgea_j1Y\" alt=\"Person\" width=\"96\" height=\"96\">\n  <a id=\"link\" class=\"link\" href=\"https:\/\/allabout.cc\/b\/345-2\/\">Isy know how I roll?<\/a>\n  <span class=\"closebtn\" onclick=\"this.parentElement.style.display='none'\">\u00d7<\/span>\n<\/div><\/td>\n    <td>Canada<\/td>\n  <\/tr>\n<\/tbody><\/table>\n\n<script>\nfunction sortTable() {\n  var table, rows, switching, i, x, y, shouldSwitch;\n  table = document.getElementById(\"myTable\");\n  switching = true;\n  \/*Make a loop that will continue until\n  no switching has been done:*\/\n  while (switching) {\n    \/\/start by saying: no switching is done:\n    switching = false;\n    rows = table.rows;\n    \/*Loop through all table rows (except the\n    first, which contains table headers):*\/\n    for (i = 1; i < (rows.length - 1); i++) {\n      \/\/start by saying there should be no switching:\n      shouldSwitch = false;\n      \/*Get the two elements you want to compare,\n      one from current row and one from the next:*\/\n      x = rows[i].getElementsByTagName(\"TD\")[0];\n      y = rows[i + 1].getElementsByTagName(\"TD\")[0];\n      \/\/check if the two rows should switch place:\n      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {\n        \/\/if so, mark as a switch and break the loop:\n        shouldSwitch = true;\n        break;\n      }\n    }\n    if (shouldSwitch) {\n      \/*If a switch has been marked, make the switch\n      and mark that a switch has been done:*\/\n      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);\n      switching = true;\n    }\n  }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Sort a HTML Table Alphabetically Click the button to sort the table alphabetically, by name: Sort Name Country Zee know how I roll? \u00d7 Sweden North\/South UK Ama know how I roll? \u00d7 Germany Bi know how I roll? \u00d7 Germany Jas know how I roll? \u00d7 Italy Paris specialites France Ind know how I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"hide_page_title":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":""},"_links":{"self":[{"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/pages\/1109"}],"collection":[{"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":1,"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/pages\/1109\/revisions"}],"predecessor-version":[{"id":1110,"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/pages\/1109\/revisions\/1110"}],"wp:attachment":[{"href":"https:\/\/allabout.cc\/a1\/wp-json\/wp\/v2\/media?parent=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}