Neo54213,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.up span.indicator{
display: inline-block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 16px solid red;
}
.dn span.indicator{
display: inline-block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 16px solid red;
}
span.indicator{
display: inline-block;
width: 16px;
height: 16px;
}
.act{
background-color: #D3D3D3;
}
.button{
display: inline-block;
border: 1px #191970 solid;
margin: 4px 2px;
cursor: pointer;
}
th{
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var headers = ['Номер', 'Название', 'Количество', 'Цена'];
var fieldsNames = ['id', 'name', 'count', 'price'];
var orders = [
[
{
id: 1,
name: "Book",
count: 3,
price: 157
},
{
id: 2,
name: "Pen",
count: 4,
price: 85
},
{
id: 3,
name: "Phone",
count: 1,
price: 464
},
{
id: 4,
name: "Pencil",
count: 65,
price: 314
},
{
id: 5,
name: "Sharpener",
count: 6,
price: 96
}
],
[
{
id: 1,
name: "Tape",
count: 5,
price: 543
},
{
id: 2,
name: "Textbook",
count: 65,
price: 314
},
{
id: 3,
name: "Pencil case",
count: 35,
price: 346
},
{
id: 4,
name: "Desk",
count: 5,
price: 4314
},
{
id: 5,
name: "Marker",
count: 5,
price: 145
}
],
[
{
id: 1,
name: "Paper",
count: 5,
price: 87
},
{
id: 2,
name: "Chalk",
count: 6,
price: 435
},
{
id: 3,
name: "Clock",
count: 8,
price: 563
},
{
id: 4,
name: "Ruler",
count: 22,
price: 457
},
{
id: 5,
name: "Globe",
count: 7,
price: 789
}
],
[
{
id: 1,
name: "Chair",
count: 2,
price: 54
},
{
id: 2,
name: "Eraser",
count: 56,
price: 2445
},
{
id: 3,
name: "Map",
count: 11,
price: 345
},
{
id: 4,
name: "Scissors",
count: 24,
price: 451
},
{
id: 5,
name: "Notebook",
count: 32,
price: 654
}
]
];
var section = $("section");
var header = $("<header>").appendTo(section);
var table = $("<table>", {"id": "orderstable"}).appendTo(section);
var thead = $("<thead>").appendTo(table);
var tbody = $("<tbody>").appendTo(table);
var tbodyContent = orders.map(function(trs, i) {
$("<div>", {
text: "Заказ " + +(i + 1),
"class": "button order" + +(i + 1),
click: function() {
tbody.html(tbodyContent[i]);
$("th", thead).removeClass("up dn");
$(".button", header).removeClass("act");
$(this).addClass("act")
}
}).appendTo(header);
return trs.map(function(tds) {
var tr = $("<tr>");
fieldsNames.forEach(function(key, i) {
$("<td>", {
text: tds[key]
}).appendTo(tr)
});
return tr
})
});
function fnSort(i) {
return function(b, a) {
a = $("td", a).eq(i).text();
b = $("td", b).eq(i).text();
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
}
}
headers.forEach(function(text, i) {
var fn = fnSort(i),
k = 0;
var th = $("<th>", {
click: function() {
k ^= 1;
var tr = $("tr", tbody).get().sort(fn);
k && (tr = tr.reverse());
tbody.append(tr);
$("th", thead).removeClass("up dn");
th.addClass(k ? "up" : "dn")
},
text: text
});
var indicator = $("<span>", {
"class": "indicator"
});
th.prepend(indicator);
thead.append(th);
});
$(".button:first").click();
});
</script>
</head>
<body>
<section></section>
</body>
</html>
