Сортировка строк в таблице
Нашел скрипт
(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. |