<!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() {
function example(a, b) {
if (a == +a && b == +b) return a - b;
if (a == +a) return -1;
if (b == +b) return 1;
a = a.toString().match(/\d+|\D+/g);
b = b.toString().match(/\d+|\D+/g);
var length = Math.min(a.length, b.length);
for (var i = 0; i < length; i++) {
if (a[i] == +a[i] && b[i] == +b[i]) return a[i] - b[i];
if (a[i] == +a[i]) return -1;
if (b[i] == +b[i]) return 1;
if (b[i] > a[i]) return -1;
if (b[i] < a[i]) return 1;
}
return 0;
}
var tables = [].slice.call(document.querySelectorAll(".table_sort"), 0);
tables.forEach(function(tbl) {
var 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 example(a, b);
}));
var f = document.createDocumentFragment();
e.reverse().forEach(function(a, i) {
f.appendChild(tr[a[0]]);
});
tbody.appendChild(f);
}
});
});
});
</script>
</head>
<body>
<table style="width:99%" class="table_sort">
<thead>
<tr>
<th>Name</th>
<th>count1</th>
<th>count2</th>
</tr>
</thead>
<tbody>
<tr class="bc">
<td>jacques</td>
<td><b>12</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>mkishimoto</td>
<td><b>4</b></td>
<td>5</td>
</tr>
<tr class="bc">
<td>info</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>monika</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>sales</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>alex</td>
<td><b>5</b></td>
<td>0</td>
</tr>
<tr class="bc">
<td>monika</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>bailey</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>bansi.v</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>dstrupiechowski</td>
<td><b>2</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>alexx</td>
<td><b>1</b></td>
<td>0</td>
</tr>
</tbody>
</table>
<table class="table_sort">
<thead>
<tr>
<th>Title 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>слово4</td>
</tr>
<tr>
<td>слово1</td>
</tr>
<tr>
<td>слово11</td>
</tr>
<tr>
<td>Вася</td>
</tr>
</tbody>
</table>
</body>
</html>