Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39

Чередование строк таблицы после сортировки

30.07.2013, 18:33. Показов 1228. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Имеется таблица с сортировкой по названию столбца:
http://jsfiddle.net/NGgaW/1/

html:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<table class="sort">
    <thead>
    <tr>
        <td >Дом/Блок</td>
        <td>Этаж</td>
        <td>Комнат</td>
        <td>Общая площадь, м2</i></b></td>
        <td>Лоджия, балкон</td>
        <td>Цена</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Блок "А"</td>
        <td>подвал</td>
        <td><br></td>
        <td>36.8</td>
        <td><br></td>
        <td>552,000р.</td>
    </tr>
    <tr>
        <td>Блок "Б"</td>
        <td>1</td>
        <td><br></td>
        <td>79.6</td>
        <td><br></td>
        <td>1,194,000р.</td>
    </tr>
    <tr>
        <td>Блок "В"</td>
        <td>2</td>
        <td><br></td>
        <td>70.0</td>
        <td><br></td>
        <td>1,050,000р.</td>
    </tr>
    <tr>
        <td>Блок "А"</td>
        <td>подвал</td>
        <td><br></td>
        <td>29.0</td>
        <td><br></td>
        <td>435,000р.</td>
    </tr>
    <tr>
        <td>Блок "К"</td>
        <td>5</td>
        <td><br></td>
        <td>29.0</td>
        <td><br></td>
        <td>435,000р.</td>
    </tr>
    <tr>
        <td>Блок "П"</td>
        <td>9</td>
        <td><br></td>
        <td>15.4</td>
        <td><br></td>
        <td>231,000р.</td>
    </tr>
    <tr>
        <td>Блок "Б"</td>
        <td>6</td>
        <td>3</td>
        <td>113.5</td>
        <td>Лоджия, балкон</td>
        <td>3,064,500р.</td>
    </tr>
</tbody></table>

JS:
Кликните здесь для просмотра всего текста
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
var img_dir = "/images/";
var sort_case_sensitive = false; // вид сортировки (регистрозависимый или нет)
 
// ф-ция, определяющая алгоритм сортировки
function _sort(a, b) {
    var a = a[0];
    var b = b[0];
    var _a = (a + '').replace(/,/, '.');
    var _b = (b + '').replace(/,/, '.');
    if (parseFloat(_a) && parseFloat(_b)) return sort_numbers(parseFloat(_a), parseFloat(_b));
    else if (!sort_case_sensitive) return sort_insensitive(a, b);
    else return sort_sensitive(a, b);
}
 
// ф-ция сортировки чисел
function sort_numbers(a, b) {
    return a - b;
}
 
// ф-ция регистронезависимой сортировки
function sort_insensitive(a, b) {
    var anew = a.toLowerCase();
    var bnew = b.toLowerCase();
    if (anew < bnew) return -1;
    if (anew > bnew) return 1;
    return 0;
}
 
// ф-ция регистрозависимой сортировки
function sort_sensitive(a, b) {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
}
 
// вспомогательная ф-ция, выдирающая из дочерних узлов весь текст
function getConcatenedTextContent(node) {
    var _result = "";
    if (node == null) {
        return _result;
    }
    var childrens = node.childNodes;
    var i = 0;
    while (i < childrens.length) {
        var child = childrens.item(i);
        switch (child.nodeType) {
            case 1: // ELEMENT_NODE
            case 5: // ENTITY_REFERENCE_NODE
                _result += getConcatenedTextContent(child);
                break;
            case 3: // TEXT_NODE
            case 2: // ATTRIBUTE_NODE
            case 4: // CDATA_SECTION_NODE
                _result += child.nodeValue;
                break;
            case 6: // ENTITY_NODE
            case 7: // PROCESSING_INSTRUCTION_NODE
            case 8: // COMMENT_NODE
            case 9: // DOCUMENT_NODE
            case 10: // DOCUMENT_TYPE_NODE
            case 11: // DOCUMENT_FRAGMENT_NODE
            case 12: // NOTATION_NODE
            // skip
            break;
        }
        i++;
    }
    return _result;
}
 
// суть скрипта
function sort(e) {
    var el = window.event ? window.event.srcElement : e.currentTarget;
    while (el.tagName.toLowerCase() != "td") el = el.parentNode;
    var a = new Array();
    var name = el.lastChild.nodeValue;
    var dad = el.parentNode;
    var table = dad.parentNode.parentNode;
    var up = table.up;
    var node, arrow, curcol;
    for (var i = 0; (node = dad.getElementsByTagName("td").item(i)); i++) {
        if (node.lastChild.nodeValue == name){
            curcol = i;
            if (node.className == "curcol"){
                arrow = node.firstChild;
                table.up = Number(!up);
            }else{
                node.className = "curcol";
                arrow = node.insertBefore(document.createElement("img"),node.firstChild);
                table.up = 0;
            }
            arrow.src = img_dir + table.up + ".gif";
            arrow.alt = "";
        }else{
            if (node.className == "curcol"){
                node.className = "";
                if (node.firstChild) node.removeChild(node.firstChild);
            }
        }
    }
    var tbody = table.getElementsByTagName("tbody").item(0);
    for (var i = 0; (node = tbody.getElementsByTagName("tr").item(i)); i++) {
        a[i] = new Array();
        a[i][0] = getConcatenedTextContent(node.getElementsByTagName("td").item(curcol));
        a[i][1] = getConcatenedTextContent(node.getElementsByTagName("td").item(1));
        a[i][2] = getConcatenedTextContent(node.getElementsByTagName("td").item(0));
        a[i][3] = node;
    }
    a.sort(_sort);
    if (table.up) a.reverse();
    for (var i = 0; i < a.length; i++) {
        tbody.appendChild(a[i][3]);
    }
}
 
// ф-ция инициализации всего процесса
function init(e) {
    if (!document.getElementsByTagName) return;
 
    for (var j = 0; (thead = document.getElementsByTagName("thead").item(j)); j++) {
        var node;
        for (var i = 0; (node = thead.getElementsByTagName("td").item(i)); i++) {
            if (node.addEventListener) node.addEventListener("click", sort, false);
            else if (node.attachEvent) node.attachEvent("onclick", sort);
            node.title = "Нажмите на заголовок, чтобы отсортировать колонку";
        }
        thead.parentNode.up = 0;
        
        if (typeof(initial_sort_id) != "undefined"){
            td_for_event = thead.getElementsByTagName("td").item(initial_sort_id);
            if (document.createEvent){
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("click", false, false, window, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, td_for_event);
                td_for_event.dispatchEvent(evt);
            } else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick");
            if (typeof(initial_sort_up) != "undefined" && initial_sort_up){
                if (td_for_event.dispatchEvent) td_for_event.dispatchEvent(evt);
                else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick");
            }
        }
    }
}
 
// запускаем ф-цию init() при возникновении события load
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", init, false);
    else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->


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

Сам яваскрипт не знаю, нужна ваша помощь!

И еще, помогите пожалуйста убрать код, который вставляет картинки 0.gif и 1.gif, они не нужны. Спасибо!
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.07.2013, 18:33
Ответы с готовыми решениями:

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

Перемешивание строк таблицы после обновления страницы сайта
Подскажите пожл как сделать, чтобы строки таблицы html &lt;tr&gt; перемешивались при каждом обновлении страницы сайта?

Удалить запись из таблицы после сортировки
Есть таблица сталей с их характеристиками. Редактирование, удаление и добавление записей происходит через DBNavigator, например: ...

4
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
30.07.2013, 22:39
Java
1
2
3
$('.sort tr:first-child').click(function(){
$('.sort tr:nth-child(odd)').not('.sort tr:first-child').css('background','orange');
});
even нечетные odd четные
0
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 01:36  [ТС]
vooduq, Если честно, ничего не понимаю в этом) Подскажите, как интегрировать сие решение в мой код? Если не трудно, покажите в jsfiddle. Спасибо

Добавлено через 8 минут
Мне нужно в конечном итоге получить такую таблицу. Выберите вкладку "Свободные квартиры"
0
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
31.07.2013, 02:02
ну я даже не знаю, у Вас там чистый джаваскрипт, может лучше в разделе джавы помогут?
мой код делает при клике на первую строку таблицы все последующие перекрашиваются в зебру оранжевый и текущий
0
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 02:05  [ТС]
Понятно, спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
31.07.2013, 02:05
Помогаю со студенческими работами здесь

Чередование цветом строк в 2 таблицах
Добрый день и всех с праздниками))) Есть 2 таблицы, в одну из которых тянутся данные из соседнего листа. Суть в принципе не в этом. ...

Пример быстрой сортировки массива строк и сортировки методом выбора
Добрый вечер. Скиньте пожалуйста пример быстрой сортировки массива строк и сортировки массива строк методом выбора. Очень срочно надо,...

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

После удаления строк из таблицы mySQL не сбрасывает счетчик id (который на автоповышении). Как быть?
Нужно ли вообще его сбрасывать (имхо, без сброса навигация будет крайне затруднена, как мне кажется), и если &quot;да&quot;, то как? А то...

Можно ли написать функцию которая возвращала бы и выборку из таблицы и количество строк в исходной таблицы?
Я хочу написать функцию которая делала бы выорку в большой таблице, а потом возвращала бы часть этой таблицы (например первые 5 строк) и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru