Сортировка строк в таблице
Нашел скрипт
(function(){ var a_re = /[cdu]\_\d+\_[cdu]/, a_color = 1 function hc(s, c) {return (" " + s + " ").indexOf(" " + c + " ") !== -1} function ac(e, c) {var s = e.className; if (!hc(s, c)) e.className += " " + c} prepTabs = function (t){ var el, th, cs, c, cell, axis, ts = (t && t.className) ? [t] : document.getElementsByTagName("table") for (var e in ts) { el = ts[e] if (hc(el.className, "sortable")) { if (!el.tHead) { th = document.createElement("thead") th.appendChild(el.rows[0]) el.appendChild(th) } th = el.tHead ac(th, "c_0_c") th.title = "Сортировать" th.onclick = clicktab el.sorted = NaN } } } var clicktab = function (e) { e = e || window.event var obj = e.target || e.srcElement while (!obj.tagName.match(/^(th|td)$/i)) obj = obj.parentNode var i = obj.cellIndex, t = obj.parentNode while (!t.tagName.match(/^table$/i)) t = t.parentNode var cn = obj.className, verse = /d\_\d+\_d/.test(cn), dir = (verse) ? "u" : "d", new_cls = dir + "_" + a_color + "_" + dir if (a_color < 8) a_color++ if (a_re.test(cn)) obj.className = cn.replace(a_re, new_cls) else obj.className = new_cls var j = 0, tb = t.tBodies[0], rows = tb.rows, l = rows.length, c, v, vi if (i !== t.sorted) { t.sarr = [] for (j; j < l; j++) { c = rows[j].cells[i] v = (c) ? (c.innerHTML.replace(/\<[^<>]+?\>/g, "")) : "" vi = Math.round(100 * parseFloat(v)).toString() if (!isNaN(vi)) while (vi.length < 10) vi = "0" + vi else vi = v t.sarr[j] = [vi + (j/1000000000).toFixed(10), rows[j]] } } t.sarr = t.sarr.sort() if (verse) t.sarr = t.sarr.reverse() t.sorted = i for (j = 0; j < l; j++) tb.appendChild(t.sarr[j][1]) obj.title = "Отсортировано по " + ((verse) ? "убыванию" : "возрастанию") } window.onload = prepTabs })() Он сортирует строки в зависимости от содержимого в столбце выбранного "th". Может кто подскажет, как переделать скрипт, чтобы он автоматически сортировал строки в зависимости только от содержимого одного столбца? Т.е. изменяешь данные в определенном столбце, а скрипт сортирует строки в порядке убывания по содержимому столбца. |
Цитата:
|
Я написал скрипт, который подсчитывает сумму чисел в строке(вбиваются в ручную), результат помещает в специально отведенную ячейку в этой строке. Строк в таблице достаточно, чтобы под это дело написать скрипт, дабы упростить свой труд. Да и таблиц тоже не мало.
Проблема в том, что строки должны сортироваться по убывания в зависимости от ячеек в столбце с результатом . Скрипт выше сортирует строки при клике на какой-нибудь из "th" в зависимости от "td" под ним. Можно ли переделать этот скрипт так, чтобы строки сортировались в зависимости от значений только одного столбца (с результатами) сразу после изменений в нем, и как это моно сделать? |
Apollon,
могу только повторить Цитата:
|
В строке есть пустые ячейки, которые я заполняю после окончания гоночной сессии. Вбиваю туда количество набранных гонщиком баллов. После сохранения документа изменяется сумма баллов благодаря небольшему скрипту
var a = 0, b = 0; $('tr.sum1 td.green').each(function(){ a += parseInt($(this).text()); //alert(a); $('td.sum_s_f strong').text(a); }); $('tr.sum2 td.green').each(function(){ b += parseInt($(this).text()); $('td.sum_f_a strong').text(b); }); |
Возникает необходимость отсортировать строки в порядке убывания
...................Сумма балов_______балы за гонку 1. С. Феттель 297___________25 ... 2. Ф. Алонсо 200___________18 ... 3. К. Райкконен 150___________15 ... |
Apollon,
нарисуйте таблицу до сортировки и подсчтёта |
...................Сумма балов_______балы за гонку
С. Феттель 287___________25 ... К. Райкконен 145___________15 ... Ф. Алонсо 140___________18 ... |
Apollon,
макет полностью на этих троих html |
Вот код таблицы я намерено оставил не заполненные ячейки <td title=""> </td>
Цитата:
|
Apollon, сортировка и подсчёт одновременно -- для наглядности строка 3 на 1 месте и добавлен class="sum_k_r"
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document) .ready(function () { var tr = $('.statistika-table tr').not(':first'); tr.each(function () { var sum = 0; $('.green', this) .each(function () { sum += parseInt($(this) .text()) }); $('[class^=sum] strong', this) .text(sum); }); tr = $.makeArray(tr) .sort(function (a, b) { a = +$('[class^=sum] strong', a) .text(); b = +$('[class^=sum] strong', b) .text(); return b - a }) $.map(tr, function (el, i) { $('td:first', el) .text(i + 1 + '.'); return el; }); $(tr) .appendTo($('.statistika-table tbody')) }); </script> </head> <body> <table class="sortable statistika-table" cellspacing='0'> <tr> <th>№</th> <th>Пилот</th> <th>Очки</th> <th class="flag"><a class="r" href="#"><img title="Гран-при Австралии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-пр/ малайзии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Китая" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Бахрейна" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Испании" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-пр/ монако" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Канады" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Великобритании" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Германии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Венгрии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Бельгии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Италии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Сингапура" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Кореии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Японии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Индии" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Абу-Даби" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при США" src="#" width="20"></a></th> <th class="flag"><a class="r" href="#"><img title="Гран-при Бразилии" src="#" width="20"></a></th> </tr> <tr> <td>3.</td> <td class="l"><a class="r" href="#">К. Райкконен</a></td> <td class="sum_k_r"><strong ></strong></td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 7">6</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 10">1</td> <td class="green" title="Позиция: 9">2</td> <td class="green" title="Позиция: 5">10</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 2">18</td> <td class="pink" title="Неисправность тормозной системы">A</td> <td title="Позиция: 11">0</td> <td class="green" title="Позиция: 3">15</td> <td class="green" title="Позиция: 2">18</td> <td title=""> </td> <td title=""> </td> <td title=""> </td> <td title=""> </td> <td title=""> </td> </tr> <tr class="sum1"> <td>1.</td> <td class="l"><a class="r" href="#">С. Феттель</a> </td> <td class="sum_s_f"><strong></strong></td> <td class="green" title="Позиция: 3">15</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 4">12</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 4">12</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 1">25</td> <td class="pink" title="Поломка шестерни">A</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 3">15</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 1">25</td> <td title=""> </td> <td title=""> </td> <td title=""> </td> <td title=""> </td> </tr> <tr class="sum2"> <td>2.</td> <td class="l"><a class="r" href="#">Ф. Алонсо</a> </td> <td class="sum_f_a"><strong></strong></td> <td class="green" title="Позиция: 2">18</td> <td class="pink" title="Столкновение: переднее крыло">A</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 8">4</td> <td class="green" title="Позиция: 1">25</td> <td class="green" title="Позиция: 7">6</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 3">15</td> <td class="green" title="Позиция: 4">12</td> <td class="green" title="Позиция: 5">10</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 2">18</td> <td class="green" title="Позиция: 6">8</td> <td title=""> </td> <td title=""> </td> <td title=""> </td> <td title=""> </td> <td title=""> </td> </tr> </table> </body> </html> |
Рони, ты гений!
Мне до тебя еще учиться и учиться. Большое спасибо! :victory: |
Извини за назойливость.
Подскажи пожалуйста, как можно отсортировать такое <table class="sortable statistika-table" cellspacing='0'> <tr> <th>№</th> <th>Пилот</th> <th>Время</th> </tr> <tr> <td>3.</td> <td><a class="r" href="#">К. Райкконен</a></td> <td class="sum">1:31.456</td> </tr> <tr> <td>1.</td> <td><a class="r" href="#">С. Феттель</a></td> <td class="sum">1:32.747</td> </tr> <tr> <td>2.</td> <td><a class="r" href="#">Ф. Алонсо</a></td> <td class="sum">1:30.545</td> </tr> |
Apollon,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document) .ready(function () { var tr = $('.statistika-table tr').not(':first'); tr = $.makeArray(tr) .sort(function (a, b) { a = $('[class^=sum]', a) .text().match(/\d+/g); b = $('[class^=sum]', b) .text().match(/\d+/g); return a[0] - b[0] || a[1] - b[1] || a[2] - b[2] }) $.map(tr, function (el, i) { $('td:first', el) .text(i + 1 + '.'); el.parentNode.appendChild(el) return el; }); }); </script> </head> <body> <table class="sortable statistika-table" cellspacing='0'> <tr> <th>№</th> <th>Пилот</th> <th>Время</th> </tr> <tr> <td>3.</td> <td><a class="r" href="#">К. Райкконен</a></td> <td class="sum">1:31.456</td> </tr> <tr> <td>1.</td> <td><a class="r" href="#">С. Феттель</a></td> <td class="sum">1:32.747</td> </tr> <tr> <td>2.</td> <td><a class="r" href="#">Ф. Алонсо</a></td> <td class="sum">1:30.545</td> </tr> </table> </body> </html> |
:)
Чтобы я без тебя делал! |
Спасибо еще раз!
|
Часовой пояс GMT +3, время: 13:33. |