Понадобилось сделать сортировку HTML-таблички по значениям ячеек столбца без перезагрузки страницы. Довольно быстро был найден скрипт для такой сортировки. Однако, содержимое ячеек таблицы в моем случае оказалось разным - где текст, где селекты... Ну и заголовки оформлены тегом <th>. В связи с вышеозначенным скрипт был слегка доработан.
Теперь он не чувствителен к оформлению строки заголовка - нет разницы, используется ли <th> или <td> (главное, чтоб они были одинаковы) и наличие или отсутствие тэга <tbody> или <thead>.
В этом коде читывается тип содержимого ячеек сортируемой таблички. На данный момент допустимы <input type="text"> и <select> Необходимо заметить, что в HTML-коде таблицы между тэгами <td><select> не должно быть пробела или перевода строки, иначе для сортировки будет выбран не тот элемент (пробел или перевод строки является текстом).
/** Сортировка строк HTML-таблицы. Код изначально взят отсюда: http://www.easywebscripts.net/javascript/tsort.php а затем обработан напильником. Входной аргумент - ячейка-заголовок сортируемого столбца (объект). Пример использования: <table><thead> <tr> <th onclick="tSort(this);" title="Кликнуть для сортировки">Название ПО</th> <th onclick="tSort(this);" title="Кликнуть для сортировки">Статус</th> */ function tSort(el) { var col_sort = el.innerHTML; var tn = el.tagName; // таки предположим, что все ячейки заголовка оформлены одинаковым тэгом var tr = el.parentNode; // строка заголовка таблицы var table = tr.parentNode; // row -> table (без <thead> или <tbody>) if(table.tagName != 'TABLE') table = tr.parentNode.parentNode; // row -> thead -> table if(table.tagName != 'TABLE') return false; // ну тогда я не знаю..... var td, arrow, col_sort_num, tdObj, val; // вычисление и отметка заголовка сортируемого столбца for (var i=0; (td = tr.getElementsByTagName(tn).item(i)); i++) { if (td.innerHTML == col_sort) { col_sort_num = i; if (td.prevsort == "y") { arrow = td.firstChild; el.up = Number(!el.up); } else { td.prevsort = "y"; arrow = td.insertBefore(document.createElement("span"), td.firstChild); el.up = 0; } // arrow.innerHTML = el.up ? "▵ ":"▿ "; // стрелочки (жирненькие, но козявят в ИЕ) arrow.innerHTML = el.up ? "↑ ":"↓ "; // стрелочки arrow.style.color = 'brown'; // цвет arrow.style.fontSize = '120%'; // размер, покрупнее } else { if (td.prevsort == "y") { td.prevsort = "n"; if (td.firstChild) td.removeChild(td.firstChild); } } } // Сборка массива для сортировки. var a = new Array(); for(var i=1, l=table.rows.length; i<l; i++) { a[i-1] = new Array(); tdObj = table.rows[i].getElementsByTagName("td").item(col_sort_num); // вытаскиваем значение в зависимости от типа содержимого ячейки switch(tdObj.firstChild.nodeName) { case "INPUT": {val = tdObj.firstChild.value; break;} case "#text": {val = tdObj.innerHTML; break} case "SELECT": {val = tdObj.firstChild.options[tdObj.firstChild.selectedIndex].text; break} } a[i-1][0] = val.toLowerCase(); // значение для сортировки a[i-1][1] = table.rows[i]; // строка таблицы (как объект) } // сортировка и вывод a.sort(); if(el.up) a.reverse(); for(var i=0, l=a.length; i<l; i++) table.appendChild(a[i][1]); return true; }
Вариант для регистронезависимой сортировки по тексту ссылок, дате/времени вида 19:01 10.01.2010 (с пробелом) и тексту вида 1`280`616 (размер файла, например)
// вытаскиваем значение в зависимости от типа содержимого ячейки switch(tdObj.firstChild.nodeName) { case "A": { val = tdObj.firstChild.innerHTML; val = val.toLowerCase(); break; } case "#text": { val = tdObj.innerHTML; if(val.indexOf(" ") >= 0) { // ячейка с датой val = val.substr(12,4) + val.substr(9,2) + val.substr(6,2) + val.substr(0,2) + val.substr(3,2); } else { // размер файла val = "0000000000000000000" + val.replace(/`/, ""); val = val.substr(val.length-14); } break; } }