olelukoie,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tr.first {
text-align: center;
color: #0000CD;
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var localData = JSON.parse(localStorage.getItem("localData") || "[]");
var data = [
["Crypto ++ SDK 3.0", "Copyright © 1997-1999 Sampson Multimedia.", "1997"],
["Gus", "Gus Communications, Inc.", "2004"],
["CripKey", "Kenonic Controls Ltd.", "2010"],
["Microcosm Copy Protection", "Microcosm Copy Protection", "1996"],
["Dinkey Dongles", "Dinkey Dongles", "2003"],
["PC Guard", "Copyright © by Blagoje Ceklic", "1998"],
["SafeSerial OCX для Windows 95, 98, NT, 2000", "Sikander Soft Inc.", "1995"],
["Wibu — Key", "©1999 Copy-Protection.com.", "1999"],
["Lock & Key", "Timeless Technologies, Inc.", "2009"],
["Windows Protection Tool-Kit", "Advanced Software Technologies", "2006"],
["Hardlock Bistro", "Aladdin Knowledge Systems GmbH & Co.", "2007"],
["Sheriff", "Acudata Limited", "2002"]
];
if(localData.length) data = localData;
/* создание таблицы */
function createHTML(data) {
return data.reduce(function(html, text) {
var tr = "<tr><td>" + text.join("<td>");
return html + tr;
}, "");
}
function createTable(data, tbody)
{
var html = createHTML(data);
tbody.innerHTML = html
}
var tbody = document.querySelector("#tablebody");
createTable(data, tbody);
/* сортировка */
(function(f) {
var collator = new Intl.Collator(["en", "ru"], { numeric: true });
function g(c, k) {
return function(b, a) {
b = b.cells[c].textContent;
a = a.cells[c].textContent;
return k * collator.compare(a, b)
}
}
var d = document.querySelector(f);
[].slice.call(d.rows[0].cells).forEach(function(c, b) {
var a = 1;
c.addEventListener("click", function(event) {
event.preventDefault();
var e = [].slice.call(d.rows, 1),
tbody = e[0].parentNode;
e.sort(g(b,a));
e.forEach(function(a) {
tbody.appendChild(a)
});
a = -a;
})
})
})("#table")
/* добавление данных */
document.form.addEventListener('submit', function(event) {
event.preventDefault();
var form = this;
var item = ["book","author","year"].map(function(name) {
return form[name].value
});
form.reset();
data.push(item);
localStorage.setItem("localData", JSON.stringify(data));
createTable(data, tbody);
})
});
</script>
</head>
<body>
<table border="1" id="table">
<tr class="first">
<td>Программа</td>
<td>Разработчик</td>
<td>Год создания</td>
</tr>
<tbody id="tablebody"></tbody>
</table>
<!-- Form starts -->
<form name="form" >
<fieldset>
<legend>Add Form</legend>
<table width="100%" border="0">
<tr>
<td width="120"><label for="book">Book</label></td>
<td><input name="book" id="book" size="30" /></td>
</tr>
<tr>
<td width="120"><label for="author">Author</label></td>
<td><input name="author" id="author" size="30" /></td>
</tr>
<tr>
<td width="120"><label for="year">Year</label></td>
<td><input name="year" id="year" size="30" /></td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="Submit" value="Add" />
</td>
</tr>
</table>
</fieldset>
</form>
<!-- Form ends -->
</body>
</html>