Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2013, 21:19
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

Сортировка строк в таблице
Нашел скрипт
(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".
Может кто подскажет, как переделать скрипт, чтобы он автоматически сортировал строки в зависимости только от содержимого одного столбца?
Т.е. изменяешь данные в определенном столбце, а скрипт сортирует строки в порядке убывания по содержимому столбца.
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2013, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

Сообщение от Apollon
Т.е. изменяешь данные в определенном столбце
каким образом меняются данные в таблице? и запускается скрипт сортировки?
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2013, 23:17
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

Я написал скрипт, который подсчитывает сумму чисел в строке(вбиваются в ручную), результат помещает в специально отведенную ячейку в этой строке. Строк в таблице достаточно, чтобы под это дело написать скрипт, дабы упростить свой труд. Да и таблиц тоже не мало.
Проблема в том, что строки должны сортироваться по убывания в зависимости от ячеек в столбце с результатом .
Скрипт выше сортирует строки при клике на какой-нибудь из "th" в зависимости от "td" под ним.
Можно ли переделать этот скрипт так, чтобы строки сортировались в зависимости от значений только одного столбца (с результатами) сразу после изменений в нем, и как это моно сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2013, 23:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

Apollon,
могу только повторить
Сообщение от Apollon
сразу после изменений в нем
что значат эти слова ???
Ответить с цитированием
  #5 (permalink)  
Старый 25.11.2013, 23:33
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

В строке есть пустые ячейки, которые я заполняю после окончания гоночной сессии. Вбиваю туда количество набранных гонщиком баллов. После сохранения документа изменяется сумма баллов благодаря небольшему скрипту
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);
				
	});

Последний раз редактировалось Apollon, 25.11.2013 в 23:41.
Ответить с цитированием
  #6 (permalink)  
Старый 25.11.2013, 23:38
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

Возникает необходимость отсортировать строки в порядке убывания
...................Сумма балов_______балы за гонку
1. С. Феттель 297___________25 ...
2. Ф. Алонсо 200___________18 ...
3. К. Райкконен 150___________15 ...
Ответить с цитированием
  #7 (permalink)  
Старый 25.11.2013, 23:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

Apollon,
нарисуйте таблицу до сортировки и подсчтёта
Ответить с цитированием
  #8 (permalink)  
Старый 25.11.2013, 23:52
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

...................Сумма балов_______балы за гонку
С. Феттель 287___________25 ...
К. Райкконен 145___________15 ...
Ф. Алонсо 140___________18 ...
Ответить с цитированием
  #9 (permalink)  
Старый 25.11.2013, 23:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,133

Apollon,
макет полностью на этих троих html
Ответить с цитированием
  #10 (permalink)  
Старый 26.11.2013, 00:09
Аспирант
Отправить личное сообщение для Apollon Посмотреть профиль Найти все сообщения от Apollon
 
Регистрация: 01.11.2013
Сообщений: 42

Вот код таблицы я намерено оставил не заполненные ячейки <td title="">&nbsp;</td>
Цитата:
<p style="font-size:18pt"><em>Рейтинг пилотов</em></p>
<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 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="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</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="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
</tr>
<tr class="sum3">
<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="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
<td title="">&nbsp;</td>
</tr>
</table>

Последний раз редактировалось Apollon, 26.11.2013 в 00:13.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Видимость строк в таблице Mars_ Общие вопросы Javascript 8 23.01.2013 13:38
Разварачивание строк в таблице на jQyery Suharik jQuery 49 07.05.2010 11:20
Подсчитать кол-во строк в таблице? bobroff jQuery 3 04.12.2009 12:29
Сортировка числовых данных в таблице Vladsss Общие вопросы Javascript 15 01.09.2009 17:02
поменять цвет у нескольких строк в таблице Root Элементы интерфейса 4 21.04.2008 10:30