How to EASILY Sort HTML Tables with CSS & JavaScript - Web Development Tutorial 

could you change it up in the Source Code that you linked? would really apreciate it because i can't make it work how it should.

Ok i made it work but now the name won't be sorted correctly..

@@krichter9245 you probably need to sort it differently based on the type of column, here's what I did: if (column !== 1) { sortedRows = rows.sort((a, b) => { const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier); }) } else { sortedRows = rows.sort((a, b) => { const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', '')); const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', '')); return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier); }) }if (column !== 1) { sortedRows = rows.sort((a, b) => { const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim(); return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier); }) } else { sortedRows = rows.sort((a, b) => { const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', '')); const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', '')); return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier); }) } so basically I chekced to see if it was the column with numbers in it and sort differently based on that. one month late reply idk how useful this will be to you but good luck!

@@samuelhowell5962 Thanks Dude, Take care

@@samuelhowell5962 It was really useful to me. Thank you!!

Cheers mate!

No worries mate!

Cheers!!

No problem!

*had

*stars xDD holy shit my english

You're welcome, glad it could help

please share

hey idk if this helps you sort the numbers const sortedRows = rows.sort((a, b) => { const aColText = a.querySelector(`td:nth-child(${ column + 1})`).textContent.trim(); const bColText = b.querySelector(`td:nth-child(${ column + 1})`).textContent.trim(); const aNum = parseInt(aColText); const bNum = parseInt(bColText); return (aNum - bNum) > 0 ? (1 * dirModifier) : (-1 * dirModifier); });

@@michaelwang1524 Thank you so much. That totally worked. Greatly appreciated.

@@TownleyVM You know what we should totally work together if ur also building a website so we can bounce ideas off of each other.

@@michaelwang1524 I had this problem too and this sorted it, thank you! My first column is made up of strings and the rest numbers so I added an if statement to differentiate between your return code and the one used in the video.

Thanks again for great video and code. I figured it out. I set the 'asc' parameter to 'false' in the sortTableByColumn function and also named the const dirModifier = asc ? from 1 : -1 to -1 : 1

did u get the solution?

Did you got anything for this?

You could make use of something like Local Storage or Session Storage

I made it work with a forEach on every row to keep the index before adding to the empty table...thank you for the quick reply:D

Same problem

That's a much better solution. I've been using it in my recent videos. Thanks 😀

It's using the ternary operator: developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator We want either -1 or 1, and the dirModifier flips number (-1 or 1) depending on if we are sorting ascending or descending

@@dcode-software thank you sir

It's there in the description

Hi, Can you share full code please