|
Сообщение от laimas
|
|
Можно хранить ключи сортировки и просто реверсировать их.
|
... (на всякий случай уточню, ключ создаётся только при первом клике, для каждой колонки, потом при кликах, работает только реверс ).
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
margin: 20px auto;
}
td,
th {
border: 1px solid #ddd;
padding: 5px;
}
th {
cursor: default;
padding: 6px;
background: #eee;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var tbl = document.querySelector("table"),
tbody = tbl.querySelector("tbody"),
th = [].slice.call(tbl.querySelectorAll("th"), 0),
tr = [].slice.call(tbody.querySelectorAll("tr"), 0),
td = [].slice.call(tbody.querySelectorAll("td"), 0),
obj = {};
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
e = e.target || e.srcElement;
if ("TH" == e.tagName) {
e = th.indexOf(e);
e = obj[e] || (obj[e] = td.filter(function(a, i) {
return i == e && (e += th.length);
}).map(function(a, i) {
return [i, a.textContent];
}).sort(function(a, b) {
a = a[1];
b = b[1];
return a == +a ? b - a : b > a ? 1 : b < a ? -1 : 0;
}));
var f = document.createDocumentFragment();
e.reverse().forEach(function(a, i) {
f.appendChild(tr[a[0]]);
});
tbody.appendChild(f);
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>7.5</td>
<td>abcd</td>
<td>120</td>
<td>230</td>
</tr>
<tr>
<td>.5</td>
<td>txt</td>
<td>200</td>
<td>500</td>
</tr>
<tr>
<td>.18</td>
<td>jnr</td>
<td>150</td>
<td>180</td>
</tr>
</tbody>
</table>
</body>
</html>