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

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

30.07.2013, 18:33. Показов 1001. Ответов 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
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.07.2013, 18:33
Ответы с готовыми решениями:

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

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

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

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

4
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
30.07.2013, 22:39 2
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  [ТС] 3
vooduq, Если честно, ничего не понимаю в этом) Подскажите, как интегрировать сие решение в мой код? Если не трудно, покажите в jsfiddle. Спасибо

Добавлено через 8 минут
Мне нужно в конечном итоге получить такую таблицу. Выберите вкладку "Свободные квартиры"
0
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
31.07.2013, 02:02 4
ну я даже не знаю, у Вас там чистый джаваскрипт, может лучше в разделе джавы помогут?
мой код делает при клике на первую строку таблицы все последующие перекрашиваются в зебру оранжевый и текущий
0
0 / 0 / 0
Регистрация: 25.11.2012
Сообщений: 39
31.07.2013, 02:05  [ТС] 5
Понятно, спасибо!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.07.2013, 02:05

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru