HTML+CSS+JavaScript

Да можно, конечно, "пометить" только то, что наоборот не стоит сортировать. Вопрос только в том, что выгоднее - отмечать те что надо или наоборот, а это уже зависит не от свойств располагаемых таблицей, а от иного. То есть не так и страшно переопределить, если выгоднее иное.
А id с цифры, ну а что тут страшного, если используется он здесь как ячейка для хранения, не более.

id, начинающееся с цифры, тем более id только из цифр - это не комильфо

и вообще id здесь вовсе не нужны, да и специально выделять ячейки заголовка тегами <TH> нет никакой необходимости, ибо:
а) у всякой ячейки таблицы имеется её cellIndex
б) у всякой строки таблицы имеется её rowIndex
определив б) не равное нулю, понимаем, что кликнули не по заголовку и выходим из функции
ежели б) нулевое, то определяем а) - и отсюда знаем номер сортируемого столбца

В данном примере функция asotr() выполняет тоже самое, что и аналогичная php-функция. Отличие только в том, что она возвращает массив ключей столбца, по которому производится сортировка. В исходном коде ключи этого массива обеспечивают выборку значений из объекта описывающего таблицу в порядке возрастания значений. Если этот массив реверсировать, то вы получите обратную сортировку. Добавьте глобальную переменную, например, d, которая будет хранить направление сортировки и условием выбора стиля сортируемого столбца. При каждой сортировке инвертируйте ее значение, вот и получится нужное.

var obj = [], d = 0; //строку кода cellsValue(asort(obj[e.id])); заменить на var k = asort(obj[e.id]); if(d) k.reverse(); //здесь же по условию указывайте стиль заголовка столбца d ^= 1; cellsValue(k);

Но скорее всего, это будет не совсем то, чего вам хочется. То есть, если произведена сортировка по первому полю и она была произведена в возрастающем порядке, то следующая сортировка по любому полю будет происходить обязательно по убыванию.
Если требуется индивидуальность для каждого столбца таблицы, значит каждая ячейка заголовка сортируемых столбцов должна иметь свой индивидуально управляемый признак направления сортировки.

Шикарно!!!

Не подскажете, как сделать, чтобы, к примеру, при первом нажатии на th[id] - происходила сортировка по возрастанию, а при повторном нажатии - по убыванию?

И еще было бы отлично, если бы можно было добавить к ячейке, в столбце которой произведена сортировка, индикатор текущей сортировки (например, классы top-sort и down-sort)

Дело было вечером, делать было нечего. :)

И так товары. В зависимости от типа товара, вывод информации о нем может иметь различное число характеристик, то есть, если это таблица, то количество ячеек в строке ее может варьироваться. Количество товаров, это величина тоже не постоянная, а значит и число строк таблицы может быть различным.

Сортировать такой список, это не означает по всем характеристикам товара, например, сортировать товар по его описанию, это и накладно, да и не нужно. То есть, нужно определять те колонки таблицы (характеристики товаров), по которым возможна сортировка списка.

Из выше изложенного следует, что:

А: Дублировать весь список товаров массивом товаров для сценария ради сортировки, это и расточительно, и не оправдано. Гораздо практичнее получать этот массив из таблицы описывающей товары.

Б: Писать для каждой колонки таблицы свой обработчик со своей функцией сортировки, это подход необдуманный. Должна быть одна функция сортирующая по указателю. При этом сортировать весь массив совсем не нужно.

В JavaScript нет ассоциативных массивов, но их роль вполне выполняют объекты. Так как сортировка происходит по выбранной колонке таблицы, то удобнее иметь массив "наоборот" - массив объектов, индексы которого, это не индекс строки, а индекс ячейки в строке, а ключи объектов, это индексы строк. То есть, каждое вложение массива, это объект описывающий соответствующую колонку таблицы. При этом, ключи объектов учитывают, что таблица имеет "шапку", первую строку с описанием колонок, и которая не должна участвовать в сортировке.

Если иметь такой массив, то достаточно сортировать только тот объект, на который укажет индекс выбранной ячейки строки шапки. При этом результатом сортировки важны не сами значения сортируемого объекта, а его ключи. Результат сортировки в исходный массив не заносится - этот массив не изменяется вообще.

По отсортированным ключам производится выборка из массива объектов списка товаров при изменении (обновлении после сортировки) ячеек таблицы. Какой ключ выбирать определяет индекс строки, на момент итерации цикла.

Вот по такому принципу написан этот код. Сортировка производится по щелчку выбранной ячейки строки шапки таблицы. Каждая ячейка (TH) этой строки участвующая в сортировке имеет атрибут id, значение которого равно индексу ячейки в строке. Ячейки строки шапки колонок не участвующих в сортировке такого атрибута не имеют.

При первом запросе на сортировку формируется массив объектов списка. Функция получения этого массива выполняет и обновление ячеек таблицы после сортировки.

<style> th {     cursor: default; } th[id] {     cursor: pointer; } </style> <script> var obj = []; function asort(arr) {     var val = [], len = 0,         k, i, sorter = this,         keys = [];     sorter = function (a, b) {        var aF = parseFloat(a),            bF = parseFloat(b),            aN = aF + '' === a,            bN = bF + '' === b;        if(aN && bN) return aF > bF ? 1 : aF < bF ? -1 : 0;        else if(aN && !bN) return 1;        else if(!aN && bN) return -1;        return a > b ? 1 : a < b ? -1 : 0;     };       for (k in arr) val.push([k, arr[k]]);     val.sort(function (a, b) { return sorter(a[1], b[1]); });     for(i=0, len=val.length; i<len; i++) keys.push(val[i][0]);          return keys; } function sortTable(e) {    if(e.tagName=="TH" && e.id) {              function cellsValue(key) {          var tbl = document.getElementById("srt"),              c   = tbl.rows[0].cells.length;                    for(k=c, m=c*tbl.rows.length; k<m; k++) {             var i = k%c, j;             if(!i) j = k/c;             if(key) tbl.rows[j].cells[i].innerHTML = obj[i][key[j-1]];             else {                obj[i] = obj[i] || {};                obj[i][j] = tbl.rows[j].cells[i].innerHTML;             }            }              }              if(!obj.length) cellsValue();       cellsValue(asort(obj[e.id]));    }  } </script> <table id="srt"> <tr onclick="sortTable(event.target || event.srcElement)">  <th id="0">Название</th>  <th>Описание</th>  <th id="2">Производитель</th>  <th id="3">Цена</th>  <th id="4">Вес</th> </tr> <tr><td>Первый</td><td>Описание 1</td><td>Durex</td><td>120</td><td>230</td></tr> <tr><td>Второй</td><td>Описание 2</td><td>Asian</td><td>200</td><td>100</td></tr> <tr><td>Третий</td><td>Описание 3</td><td>Jungle</td><td>150</td><td>180</td></tr> <tr><td>Четвертый</td><td>Описание 4</td><td>Apple</td><td>50</td><td>200</td></tr> <tr><td>Пятый</td><td>Описание 5</td><td>Asian</td><td>90</td><td>300</td></tr> </table>

Проверьте. Можете менять число строк в таблице, число колонок ее, код будет работать без изменения. Изменять его потребуется, если список будет выводиться не в таблице, а иных элементах. Но это уже иной вопрос.

Я не критикую, я говорю, что это лишнее, тем более при куче. Если говорить о товарах, то это может быть самая разнообразная информация, которая представляет табличные данные. Вы думаете, что пользователю не надоест ваш анимационный фильм после первого же его просмотра при такой структуре и объеме данных?

А что касается сортировки и в контексте товаров, то ваш код сортировки в таком случае никуда не годится.

вы критикуете а не знаете для чего мне сортировка нужна. Я пишу интернет магазин где будет куча товара

Да еще саундтрек написать, а на главные роли пригласить Бреда Питта (Василий), Тома Круза (Сергей), Тома Харди (Nikolay), крутой триллер бы получился. Зачем, неужели так приятно наблюдать за передвижениями, вместо того, чтобы получить результат сразу?
Анимация нужна там, где она уместна, или выполняет определенную роль, например, при сортировке перетаскиванием в сложном списке категорий, особенно когда перетаскивается группа из одной в другую. А тут...

PS. Вы лучше ошибку в коде исправьте - не будет объекта с id равному "print3" во время загрузки страницы.

народ имеится такой вот код

<script type="text/javascript" src="./jquery.js"></script> <div style="border:1px dashed #333; background:#EEE; padding:2px 5px; margin:10px 0;" id="print3"></div> <script type="text/javascript"> function print(id, arr) {     document.getElementById(id).innerHTML = arr.toString(); } </script> <script type="text/javascript"> var multi = [     ['Nikolay', 34],     ['Сергей', 23],     ['Василий', 20] ]; print("print3", multi); // Функции сортировки function sName(i, ii) {     if (i[0] > ii[0])         return 1;     else if (i[0] < ii[0])         return -1;     else         return 0; } function sAge(i, ii) {     if (i[1] > ii[1])         return 1;     else if (i[1] < ii[1])         return -1;     else         return 0; } // функции клика $(document).ready(function(){ $("#sName").click(function(){ multi.sort(sName); print('print3', multi); return false; }); $("#sAge").click(function(){ multi.sort(sAge); print('print3', multi); return false; }); }); </script> <p>     <a href="#" id="sName">Сортировать по имени (возрастание)</a>     <a href="#" id="sAge">Сортировать по возрасту (возрастание)</a> </p>

Как к нему привязать анимацию типа передвижения элементов при клике когда происходит сортировка товара