smus Posted August 23, 2019 Share Posted August 23, 2019 Hi, I need your hint. I am using table sort from this w3schools example: https://www.w3schools.com/howto/howto_js_sort_table.asp There is a table with 2 columns, the first contains text data, the second - numbers. I want the second one to be sorted as integers, but it doesn't work when I convert a string to number like this: if(n === 1){x = parseInt(x.innerHTML)} or number(x.innerHTML) n is the column id starting from zero Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2019 Share Posted August 23, 2019 Depends? if looping through rows then columns, and retrieving value from that specific row and column. Link to comment Share on other sites More sharing options...
smus Posted August 24, 2019 Author Share Posted August 24, 2019 ? It continues sorting the column with numbers as if it's text, despite the conversion (text to number) Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2019 Share Posted August 25, 2019 You haven't shown your code. You have to cast x.innerHTML and y.innerHTML to floats or ints before comparing. Link to comment Share on other sites More sharing options...
smus Posted August 27, 2019 Author Share Posted August 27, 2019 Here's the code: <!-- the table header --> <table class='indextable' align='center'><th onclick='sortTable(this.parentNode.parentNode,0)'>Subject</th><th onclick='sortTable(this.parentNode.parentNode,1)'>Questions</th><th>Edit</th> <!-- the javascript function --> <script> function sortTable(t,n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, intx, inty; table = t;//document.getElementsByClassName("indextable")[0]; 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.rows; /* 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.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; } } } </script> Link to comment Share on other sites More sharing options...
smus Posted August 27, 2019 Author Share Posted August 27, 2019 What I am doing is that I am only adding the condition. If it is the second row of the table (n==1), convert the x.innerHTML to an integer value using parseInt or Number. It does not react onclick, but the first row keeps on sorting the values out. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2019 Share Posted August 27, 2019 If you don't use code button <> above, it reads [ i ] (without spaces) as formatting code for italics making it disappear and changing the text following it italic. Link to comment Share on other sites More sharing options...
smus Posted August 27, 2019 Author Share Posted August 27, 2019 <!-- the table header --> <table class='indextable' align='center'><th onclick='sortTable(this.parentNode.parentNode,0)'>Subject</th><th onclick='sortTable(this.parentNode.parentNode,1)'>Questions</th><th>Edit</th> <!-- the javascript function --> <script> function sortTable(t,n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, intx, inty; table = t;//document.getElementsByClassName("indextable")[0]; 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.rows; /* 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.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; } } } </script> Link to comment Share on other sites More sharing options...
smus Posted September 3, 2019 Author Share Posted September 3, 2019 Solved it! I was unattentive to include the additional <span> tag inside <td></td> (for the styles). It sorts normally without it, or with it if we use innerText instead of innerHTML Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now