<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="keywords" content="test, site, website"/> <meta name="description" content="Этот сайт является пробным сайтом"/> <link href="css/styl.css" rel="stylesheet" type="text/css" /> <link href="img/1.ico" rel="shortcut icon" type="image/x-icon" /> <title>Информациионно-справочная система.</title> <script> document.addEventListener('DOMContentLoaded', function() { 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"] ]; /* создание таблицы */ 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); createTable(data, tbody); }) document.form.addEventListener('bumbit', function(event) { event.preventDefault(); var form = this; var item = ["book","author","year"].map(function(name) { return form[name].value }); form.reset(); data.pop(item); createTable(data, tbody); }) }); </script> </head> <body> <div id="page-wrap"> <header> <a href="spavoch.html" title="На главную" id="lou">Информациионно-справочная система.</a><span class="reff"><span class="contact"><a href="reg.html" title="Зарегистрироваться">Регистрация</a></span> <span class="contact"><a href="auth.html" title="Войти">Вход</a></span></span> </header> <div class="clear"><br /></div> <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></legend> <table width="140%" border="0" class="formclass"> <tr> <td width="120"><label for="book">Программа</label></td> <td><input name="book" id="book" size="40" /></td> </tr> <tr> <td width="120"><label for="author">Разработчик</label></td> <td><input name="author" id="author" size="30" /></td> </tr> <tr> <td width="120"><label for="year">Год</label></td> <td><input name="year" id="year" size="30" /></td> </tr> <tr> <td> </td> <td> <input type="submit" name="Submit" value="Добавить" id="poprit"/> <input type="submit" name="bumbit" value="Удалить" id="poprit"/> </td> </tr> </table> </fieldset> </form> <!-- Form ends --> <div id="program_21"> <h2>Список наиболее востребованных программ.</h2> <p>*Если вы знаете альтеративные программы, можете занести их в таблицу.</p> </div> <footer> <span class="leff">Все права защищены © 2018</span> <span id="asa"><a href=".html" title="FAQ">FAQ</a></span> <div id="soch">Соц кпоки</div> <span class="reff"><a href="https://vk.com/olelukoie3301"><img src="img/itt.jpg" alt="Моя страница" title="" /></a></span> <span class="reff"><a href="https://www.instagram.com/duginaa/?hl=ru"><img src="img/insta.jpg" alt="Моя страница" title="" /></a></span> </footer> </body> </html>