Среда, 06 Июня 2012 14:04

Сортировка элементов таблицы с помощью jQuery

Written by 
Оцени эту запись
(4 Голоса)

Допустим есть у нас таблица с какими-то численными значениями. Нам нужно узнать значение ее максимального и минимального элементов или же отсоттировать все элементы. В этой статье я расскажу как реализовать сортировку элементов при помощи jQuery, как найти максимальный элемент и минимальный.

 

демо

 

Рассмотрим такую таблицу:

 

 

Значания в ней могут быть любыми, также любым может быть ее размер. Сами значения у нас лежат в ячейках <td></td>, все остальное можно смело помещать в заголовки <th></th>, мы не будем их учитывать.

Как видно на демо, у нас кроме таблицы выводятся данные. 

 

 

 

Здесь у нас выводятся:

 

  • максимальный элемент
  • индекс маскимального элемента
  • минимальный элемент
  • его индекс
  • все элементы таблицы, отсортированные от минимального к максимальному

 

А теперь посмотрим как это делается.

 

 

 
<table border="1" id="color_table">
<tbody>
<tr><th>1 </th>
<td>1822</td>
<td>9804 </td>
 <td>94 </td>
<td>9615</td>
<td>9524 </td>
 <td>954 </td>
<td>932</td>
<td>9259 </td>
 <td>9174 </td>
<td>41</td>
<td>209 </td>
 <td>4 </td>
</tr>
<tr>
<th>2 </th>
<td>989</td>
<td>9612 </td>
 <td>94 </td>
<td>922</td>
<td>22 </td>
 <td>5 </td>
<td>8734</td>
<td>8573 </td>
 <td>8417 </td>
<td>84</td>
<td>216 </td>
 <td>7972 </td>
</tr>
...
</tbody></table>
<div id="max"></div>
<div id="min"></div>
<div id="sort"></div>
 
 
<table border="1" id="color_table"></table> - это непосредственно наша таблица.
<div id="max"></div> - сюда будем выводить максимальный элемент и его индекс
<div id="min"></div> - аналогично для минимального
<div id="sort"></div> - сюда будем выводить массив отсортированных элементов таблицы
 
 
Стили можно задавать произвольные, они влияют только на базовую стилизацию элементов страницы - таблицы и блоков.
 
Рассмотрим скрипт:
 
 
<script>
$(function(){
var p = new Array;
var ind = new Array;
var b=0;
var maxel;
var minel;
var maxind=0;
var minind=0;
var count=$('#color_table tr td').size();
for(i=1;i<count;i++){
p[i]=parseInt($('#color_table tr td').eq(i-1).text());
}
maxel=p[1];
minel=p[1];
for(i=1;i<count;i++){
if (p[i]>maxel) {
maxel=p[i];
maxind=i;
}
if (p[i]<minel) {
minel=p[i];
minind=i;
}
}
for(i=1;i<count;i++){
ind[i]=parseInt($('#color_table tr td').eq(i-1).text());
}
for(i=0;i<count;i++){
for(j=0;j<count;j++){
if(ind[i]<=ind[j]) {
b=ind[j];
ind[j]=ind[i];
ind[i]=b;
}
}
}
 
 
$('#max').text('maxel = '+maxel+', maxind = '+maxind);
$('#min').text('minel = '+minel+', minind ='+minind);
for(i=1;i<count;i++){
$('#sort').append(ind[i]+' ,');
}
});
</script>
 
 
Определяем все нужные нам переменные
 
var p = new Array; - в этот массив мы запишем массив элементов нашей таблицы
var ind = new Array; - в этом массиве мы будем их сортировать
var maxel; - будет равен максимальному элементу таблицы
var minel; - индекс максимального элемента
var maxind=0; - минимальный элемент
var minind=0; - индекс минимального
 
 
 
Определяем количество элементов таблицы. Как я уже говорила, оно может быть произвольным. Зависит от реальной таблицы. Переменная count будет равна количеству ячеек со значениями
 
var count=$('#color_table tr td').size();
 
 
Массиву p задаем значания элементов таблицы. Цикл идет от 1 до количества ячеек. Значение элемента ячейки берем с помощью $('#color_table tr td').eq(i-1).text(), где eq() - возвращает индекс i-той ячейки, text() - дает ее занчение, parseInt() - переводит текстовую переменную в численную.
 
 
for(i=1;i<count;i++){
p[i]=parseInt($('#color_table tr td').eq(i-1).text());
}
 
 
Для нахождения минимального и максимального элементов, задаем произвольные значения нашим переменным maxel и minel и запускаем цикл по всем элементам таблицы, внутри которого будем определять нужные значения.
 
 
maxel=p[1];
minel=p[1];
for(i=1;i<count;i++){}
 
 
Находим максимальный элемент таблицы
 
 
for(i=1;i<count;i++){                                                  

нахождение максимального элемнта массива

if (p[i]>maxel) {
maxel=p[i];
maxind=i;
}
 
 
Находим минимальный элемент таблицы
 
if (p[i]<minel) {                                                            

нахождение минимального элемента массива

minel=p[i];
minind=i;
}
 
 
Определяем массив ind, который нам будет нужен для сортировки. Для начала задаем его элементам значения, равные значениям ячеек таблицы. 
 
 
for(i=1;i<count;i++){
ind[i]=parseInt($('#color_table tr td').eq(i-1).text());
}
 
 
А теперь его сортируем
 
 
for(i=0;i<count;i++){                                                              

сортировка массива

for(j=0;j<count;j++){
if(ind[i]<=ind[j]) {
b=ind[j];
ind[j]=ind[i];
ind[i]=b;
}
}
 
 
 
И последный штрих - выводим полученные значения на экран
 
 
$('#max').text('maxel = '+maxel+', maxind = '+maxind); - в блок с  id="max" вносим значение максимального элемента и его индекс
$('#min').text('minel = '+minel+', minind ='+minind); - в блок с  id="min" вносим значение минимального элемента и его индекс
for(i=1;i<count;i++){
$('#sort').append(ind[i]+' ,'); - в блок с  id="sort" записываем отсортированный массив элементов
}
 
 
 
 
 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов