JSFiddle - React, Tailwind, and code Playground
HTML
<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>подвал</td>
<td><br></td>
<td>79.6</td>
<td><br></td>
<td>1,194,000</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>подвал</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>подвал</td>
<td><br></td>
<td>29.0</td>
<td><br></td>
<td>435,000</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>подвал</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>
<tr>
<td>Блок "А"</td>
<td>6</td>
<td>3</td>
<td>121.9</td>
<td>-</td>
<td>3,291,300</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>6</td>
<td>2</td>
<td>88.1</td>
<td>Лоджия, балкон</td>
<td>2,378,700</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>7</td>
<td>3</td>
<td>113.5</td>
<td>Лоджия, балкон</td>
<td>3,064,500</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>7</td>
<td>3</td>
<td>121.9</td>
<td>-</td>
<td>3,291,300</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>7</td>
<td>2</td>
<td>88.1</td>
<td>Лоджия, балкон</td>
<td>2,378,700</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>8</td>
<td>3</td>
<td>113.5</td>
<td>Лоджия, балкон</td>
<td>3,064,500</td>
</tr>
<tr>
<td>Блок "А"</td>
<td>8</td>
...
CSS
table.sort{
border-spacing:0.1em;
margin:1em 1em 1em 3.5em;
}
table.sort td{
border:1px solid #CCCCCC;
padding:0.3em 1em;
font-size:16px;
}
table.sort thead td{
cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle;
background-color:#ffffff !important;
color:#FF7000;
}
table.sort thead td.curcol{
}
.sort thead tr td img {
display:none !important;
}
JavaScript
function draw()
{
jQuery('.sort tbody tr').each(
function(a,b)
{
if((a%2) == 1)
jQuery(b).css('background', '#EDEDED');
else jQuery(b).css('background', '#DBDBDB');
}
);
}
// Скрипт для сортировки таблицы
var img_dir = "/images/";
var sort_case_sensitive = false; // вид сортировки (регистрозависимый или нет)
function draw()
{
jQuery('.sort tbody tr').each(
function(a,b)
{
if((a%2) == 1)
jQuery(b).css('background', '#EDEDED');
else jQuery(b).css('background', '#DBDBDB');
}
);
}
// ф-ция, определяющая алгоритм сортировки
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
...