1

Основная задача - необходимо, чтобы при нажатие по колонке, происходила сортировка элементов массива в упорядоченном виде. Не пойму как сделать правильную сортировку колонки КОЛ. ТОВАРА

<!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 ответа 2

3

avp прав. Для чисел нужно отдельное сравнение. Например вот этот код подойдет:

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);

Так же стоит обратить внимание на то что условия в сортировке чисел и строк отличаются, и с разными условиями обе колонки сортируются по убыванию, это странно, но это работает :D

1
  • Чтобы не было странностей, условия в сравнении чисел можно не ставить, как это, собственно, и предложил @avp
    – yozh
    19 сен 2011 в 12:56
1

Насколько я понимаю проблема в том, что сравниваются строки (лексикографически ?), а не числа. Мне кажется надо написать

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

или что-то подобное. Я предполагаю, что операция '-' заставит интерпретатор понять, что операнды это числа.

2
  • обычно использую (0 + str)
    – Sh4dow
    19 сен 2011 в 11:59
  • можно еще parseInt(str). @DigSil в общем случае вы можете создать столько функций сравнения, сколько нужно (sortNumbers(), sortStrings(), sortDates(),...) и, например, указывать их вторым (опциональным) параметром в shop(), который далее передавать в arrayForSort.sort().
    – yozh
    19 сен 2011 в 12:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.