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

Таблица с сортировкой строк

31.07.2013, 02:29. Показов 920. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Есть такая таблица - jsfiddle
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
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
31.07.2013, 02:29
Ответы с готовыми решениями:

Таблица с DateDiff, циклом и сортировкой строк
Доброго всем времени суток. Потихоньку осваиваю VBA. Возникли затруднения с циклами. Помогите пожалуйста. Есть таблица &quot;График...

Запрос в две таблица на получение суммы столбца с последующей сортировкой
Добрый день! Очень сильно прошу всех помочь в решении следующей задачи. У меня есть две таблицы: `tasks` (`id`, `name`,...

Таблица умножения - таблица размера n строк на m столбцов, на пересечении i-ой строки и j-ого столбца стоит число i*j
Таблицей умножения назовем таблицу размера n строк на m столбцов, в которой на пересечении i-ой строки и j-ого столбца стоит число i*j...

8
 Аватар для Vlad_IT
1452 / 360 / 61
Регистрация: 03.04.2010
Сообщений: 2,096
31.07.2013, 03:06
Можно конечно использовать вот такой веселый код
JavaScript
1
2
3
4
5
6
7
jQuery('.sort tbody tr').each(
    function(a,b) 
    { 
        if((a%2) == 1) 
            jQuery(b).css('background', 'silver'); 
    }
);
после вывода таблицы (или загрузки страницы). Но лучше сразу при генерации четным строкам назначать класс "even" а нечетным "odd", и в css уже данным классам назначить фон. Но хотя и первый вариант можно
0
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 03:13  [ТС]
Vlad_IT, если честно я в этом ничего не понимаю) Если просто добавить ваш код к моему скрипту, то после сортировки цвета перемешиваются, и они уже не чередуются черный - серый. Нужно такое решение, чтобы даже после применения сортировки, цвет строк чередовался как ни в чем не бывало).

Поэтому и класс назначать бесполезно)
0
 Аватар для Vlad_IT
1452 / 360 / 61
Регистрация: 03.04.2010
Сообщений: 2,096
31.07.2013, 03:18
Тогда вот так http://jsfiddle.net/VMaeh/
Я создал функцию draw (на четвертой строке), и вызываю ее в конце скрипта, и при сортировке.
1
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 03:23  [ТС]
Вот спасибо!) А не подскажите, как убрать код, который добавляет картинки при нажатии на заголовок? Они не нужны

Добавлено через 1 минуту
Я убирал arrow.src = img_dir + table.up + ".gif"; и arrow.alt = "", но после этого код работал неправильно
0
 Аватар для Vlad_IT
1452 / 360 / 61
Регистрация: 03.04.2010
Сообщений: 2,096
31.07.2013, 03:58
Можно вот так http://jsfiddle.net/VVftL/
1
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 21:52  [ТС]
Спасибо!

Добавлено через 17 часов 4 минуты
Все - таки возникают некоторые трудности. Vlad_IT, все отлично работает в jsfiddle, но на моем сайте все равно скрипт пытается показать какую-то картинку - это видно в опере. В любом случае, при нажатии изменяется ширина столбца. Никак не могу найти причину. Может вы сможете? Был бы признателен)
0
 Аватар для Vlad_IT
1452 / 360 / 61
Регистрация: 03.04.2010
Сообщений: 2,096
31.07.2013, 22:42
Gurg0n, добавьте пока в CSS данное свойство

CSS
1
.sort tbody tr td img { display: none; }
1
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
01.08.2013, 00:29  [ТС]
Не додумался, спасибо)

Добавлено через 22 секунды
только вместо tbody thead
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.08.2013, 00:29
Помогаю со студенческими работами здесь

Проблема с сортировкой строк
Вот собственно кусок кода, необходимо отсортировать значения строк в классе. Проблема в том что процесс сортировки не происходит до конца....

Запись строк в файл с сортировкой
Помоите пожалуйста с задачкой! (написать надо на Python) Ввод input.csv Вывод output.txt В файле input.csv с кодировкой utf-8...

Выборка строк с сортировкой по дате
Всем доброго времени суток. Подскажите один маленький момент: есть запрос на выбор строк из таблицы, и в этом запросе один из параметров -...

Борьба с сортировкой массива строк
Эта нелёгкая битва продолжается уже битый час и мне, очевидно требуется подкрепление. Есть код: #include &quot;stdafx.h&quot; ...

Помогите с сортировкой текстовых строк (Word или Excel)
Есть список (не нумерованный, не маркированный), текстовые строки отсортированы по алфавиту. Требуется код для последовательного сравнения...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru