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