Suppose we have a table:

<table> <thead> <th>Колонка 1</th> <th>Колонка 2</th> </thead> <tbody> <tr><td>Название 1</td><td>Статус 1: -<br>Покупка 2: +<br>Продажа 3: -</td></tr> <tr><td>Название 2</td><td>Статус 1: +<br>Покупка 2: -<br>Продажа 3: +</td></tr> <tr><td>Название 3</td><td>Статус 1: -<br>Покупка 2: -<br>Продажа 3: +</td></tr> </tbody> </table> 

You need to sort by column 2 so that you can choose:

  • Sort by "Status 1"
  • Sort by "Sale 2"
  • Sort by "Sale 3"

It should be borne in mind that the number of statuses can be completely different. But in each row the names will not differ (i.e. if in the first row "Status 1", "Sale 2", "Sale 3", then the same names will be in other rows, that is, there will not be such that in the first row "Status 1", and in the second "Status 150").

I think it's worth acting like this:

  • Identify all the elements in the first row of the second column (if taken from the example: Status 1, Purchase 2, Sale 3).
  • If the user wants to sort by "Purchase 2", then everything that goes to "Purchase 2" is deleted; everything that goes after "Purchase 2: [+ -] <br> " is also deleted, then "Purchase 2:" is deleted and sorting is performed.

Honestly, it is very difficult to imagine how this can be implemented and therefore I appeal to more intelligent and experienced developers!

    1 answer 1

    separate the data from the presentation:

     var data = [{ 'Название' : 1, 'Статус 1' : '-', 'Покупка 2': '+', 'Продажа 3': '-' },{ 'Название' : 2, 'Статус 1' : '+', 'Покупка 2': '-', 'Продажа 3': '+' },...]; 

    then display this data in DOM, through templates, or directly, as you like, if you don’t know - this is another question

    Further, when you need to sort the data, just do:

     data.sort(function(a,b){ /* ваша логика */ }); 

    and redelivery to the house