Sort table by value in td or span - JQuery - Javascript

Question

I have a table that is like below, I want to be able to sort ascending by # responses, # likes, # of views: (through a tag <a> preferably once clicked)

     <table><tbody>
    <tr><td>
       <p class="question-text card-category">Subject 1</p>
       <p class="question-text card-category">Question 1</p>
 <span  style="font-size:0.8rem;">Responses: 4 | likes: 5 | Views: 6</span></td>
</tr><tr>
    <td>
       <p class="question-text card-category">Subject 2</p>
       <p class="question-text card-category">Question 2</p>
       <span  style="font-size:0.8rem;">Responses: 3 | likes: 7 | Views: 5</span></td></tr>

    <td><tr>
       <p class="question-text card-category">Subject 3</p>
       <p class="question-text card-category">Question 3</p>
       <span  style="font-size:0.8rem;">Responses: 4 | likes: 5 | Views: 6</span></td></tr>
    </tbody></table>

Answer 1

to sort your table elements, you need to do it in data arrays before you draw actual table or span. if you want sort it from a values in td or span then you probably should do scraping table values using javascript or jquery methods.

once you get a sortable arrays, (probably you gets those data from scraping, ajax call or submit somewhere.) like [{"a":"banana"},{"b":"apple"}] you can be able to use compare function see this : How to sort strings in JavaScript

after sort it, draw the elements with sorted data.

i wouldn't recommend scraping which takes much effort to do unless you get data from other site..