The main task - it is necessary that when clicking on the column, the array elements are sorted in an ordered form. I do not understand how to make the correct sorting of the column QTY. GOODS

<!DOCTYPE HTML> <html> <head> <meta charset="windows-1251"> <title>Документ без названия</title> <style> *{ margin:0px; padding:0px; } #shop { width: 500px; margin-top: 10px; margin-left: 10px; } #shop td { border: 1px solid #000; } #title { background-color: #CCC; cursor: pointer; } </style> <script> function shop(num) { var shop = document.getElementById('shop'); var arrayTR = document.getElementsByTagName('tr'); var arrayForSort = new Array(); for (var i=1;i<arrayTR.length;i++){ arrayForSort.push(arrayTR[i]);//в массиве ArrayForSort будет хранится целая строка TR } //Удаляем элемент из структуры DOM сам элемент остается в нашем массиве for (var i=0;i<arrayForSort.length;i++) { arrayForSort[i].parentNode.removeChild(arrayForSort[i]); } //функция для сортировки /*У этого элемента есть потомки – элементы TD, вот по ним мы и будем сравнивать. Соответственно num – хранит колонку, по которой нужно сравнивать*/ function sortTR (tr1, tr2) { if (tr1.childNodes[num].innerHTML > tr2.childNodes[num].innerHTML) return 1; else if(tr1.childNodes[num].innerHTML == tr2.childNodes[num].innerHTML) return 0; else return -1; } //сортируем массив arrayForSort.sort(sortTR); var max = arrayForSort.length; for(var i=0; i<max; i++) shop.appendChild(arrayForSort.shift()); }</script> </head> <body> <table id="shop" cellpadding="0" cellspacing="0"> <tr id="title"><td onclick="shop(0);">ТОВАР</td><td onclick="shop(1);">КОЛ. ТОВАРА</td></tr> <tr><td>КОМПЬЮТЕРНАЯ ТЕХНИКА</td><td>34</td></tr> <tr><td>АУДИО-ВИДЕО</td><td>23</td></tr> <tr><td>ОРГТЕХНИКА</td><td>100</td></tr> <tr><td>СВЯЗЬ</td><td>12</td></tr> <tr><td>ВСЕ ДЛЯ ДОМА</td><td>62</td></tr> <tr><td>ПРОМЫШЛЕННОЕ ОБОРУДОВАНИЕ</td><td>56</td></tr> <tr><td>МУЛЬТИМЕДИА, ИГРЫ, КНИГИ</td><td>55</td></tr> <tr><td>ИНТЕРЬЕР</td><td>83</td></tr> </table> </body> </html>

    2 answers 2

    avp right For numbers you need a separate comparison. For example, this code will do:

     function sortTR0 (tr1, tr2) { if (tr1.childNodes[num].innerHTML > tr2.childNodes[num].innerHTML) return 1; else if(tr1.childNodes[num].innerHTML == tr2.childNodes[num].innerHTML) return 0; else return -1; } function sortTR1 (tr1, tr2) { if ((tr1.childNodes[num].innerHTML - tr2.childNodes[num].innerHTML) > 0) return -1; else if((tr1.childNodes[num].innerHTML - tr2.childNodes[num].innerHTML) == 0) return 0; else return 1; } //сортируем массив if (num == 0) arrayForSort.sort(sortTR0); else arrayForSort.sort(sortTR1);

    It is also worth paying attention to the fact that the conditions in the sorting of numbers and strings are different, and with different conditions both columns are sorted in descending order, it is strange, but it works: D

    • In order to avoid oddities, conditions in the comparison of numbers can not be set, as, in fact, suggested @avp - yozh

    As far as I understand the problem is that strings are compared (lexicographically?), And not numbers. I think I need to write

     function sortTR (tr1, tr2) { return tr1.childNodes[num].innerHTML - tr2.childNodes[num].innerHTML; }

    or something similar. I assume that the operation '-' will make the interpreter understand that the operands are numbers.

    • I usually use (0 + str) - Sh4dow
    • You can still parseInt (str). @DigSil in general, you can create as many comparison functions as you need ( sortNumbers() , sortStrings() , sortDates() , ...) and, for example, specify them with the second (optional) parameter in shop() , which is then passed in arrayForSort.sort() . - yozh