2016-06-07 2 views
0

Допустим, у нас есть несколько таблиц в странице, и каждый из них выглядит следующим образом:Как отсортировать несколько таблиц на основе их значений с помощью JQuery?

<table> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">25</td> 
</tr> 

</table> 

Мне нужно, чтобы выяснить, как сортировать таблицы (не их строки, порядок таблиц сам), основанные на один их значения (например, значения с классом «ei») с использованием JQuery. Все, что я мог найти, - это сортировка строк таблицы, а не самих таблиц.

Пример:

на основе значений с классом "е ^", я хочу, чтобы изменить это:

<table id="2135"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">13</td> 
</tr> 

</table> 
<table id="2131"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">50</td> 
</tr> 

</table> 
<table id="2129"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">25</td> 
</tr> 

</table> 

В это:

<table id="2135"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">13</td> 
</tr> 

</table> 
<table id="2129"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">25</td> 
</tr> 

</table> 
<table id="2131"> 
<tr> 
    <td class= "fi">102,215,231.02</td> 
    <td class= "se">215,321</td> 
    <td class= "th">1,002</td> 
    <td class= "fo">0</td> 
</tr> 
<tr> 
    <td class= "fiv">2,251</td> 
    <td class= "si">55,544,444</td> 
    <td class= "sev">123,000.25</td> 
    <td class= "ei">50</td> 
</tr> 

</table> 
+0

Как вы хотите, чтобы таблицы активировались? – BradTheBrutalitist

+0

Все ли они братья и сестры одного и того же родителя? Это будет иметь большое значение. –

+1

Если это делается только один раз, было бы лучше сделать это упорядочение таблиц на сервере. – Mottie

ответ

0

Вы можете сортировать .ei элементы, но заменить ближайшая <table> родители:

var eis = $('.ei').sort(function(a,b){ 
    return $(a).html() - $(b).html(); 
}); 

eis.each(function(i){ 
    $('body').append($(this).closest('table')) 
}) 

Работает fiddle