Добавить форму которая будет добавлять данные в массив.
Помогите пожалуйста. Нужно добавить на страницу форму, которая будет добавлять данные в массив. Скидываю всё что есть вместе с сортировкой.
<html> <head> <title>Сортировка таблицы средствами JavaScript</title> <link href="css/styl.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=Windows-1251"> <script language="JavaScript" type="text/javascript"> var txt = []; var flag; var sorted; function weight( str ) { var retArray = []; for( var i = 0; i < str.length; i++ ) { var tmp = str.charCodeAt( i ); if( tmp >= 1046 && tmp < 1078 ) tmp++; else if( tmp == 1025 ) tmp = 1046; else if( tmp >= 1078 ) tmp++; else if( tmp == 1105 ) tmp = 1078; retArray[ i ] = tmp; } return retArray; } function fillArray( years, books, authors ) { this.years = years; this.yweight = weight( years ); this.books = books; this.bweight = weight( books ); this.authors = authors; this.aweight = weight( authors ); } function isLow( low, high, type ) { var len1 = low[ type ].length; var len2 = high[ type ].length; var length = len1 < len2 ? len1 : len2; for( var i = 0; i < length; i++ ) { var str1 = low[ type ][ i ]; var str2 = high[ type ][ i ]; if( str1 < str2 ) return true; if( str1 > str2 ) return false; } if( len1 < len2 ) return true; return false; } function quickSort( l, h, type ) { var low = l; var high = h; var rt = eval( "txt[ " + Math.round( ( l + h ) / 2 ) + " ]" ); var middle = new fillArray( rt.years, rt.books, rt.authors ); do { while( isLow( eval( "txt[ " + low + " ]" ), middle, type ) ) low++; while( isLow( middle, eval( "txt[ " + high + " ]" ), type ) ) high--; if( low <= high ) { var temp = txt[ low ]; txt[ low++ ] = txt[ high ] txt[ high-- ] = temp; } } while( low <= high ); if( l < high ) quickSort( l, high, type ); if( low < h ) quickSort( low, h, type ); } txt[ 0 ] = new fillArray( "Crypto ++ SDK 3.0", "Copyright © 1997-1999 Sampson Multimedia.", "1997" ); txt[ 1 ] = new fillArray( "Gus", "Gus Communications, Inc.", "2004" ); txt[ 2 ] = new fillArray( "CripKey", "Kenonic Controls Ltd.", "2010" ); txt[ 3 ] = new fillArray( "Microcosm Copy Protection", "Microcosm Copy Protection", "1996" ); txt[ 4 ] = new fillArray( "Dinkey Dongles", "Dinkey Dongles", "2003" ); txt[ 5 ] = new fillArray( "PC Guard", "Copyright © by Blagoje Ceklic", "1998" ); txt[ 6 ] = new fillArray( "SafeSerial OCX для Windows 95, 98, NT, 2000", "Sikander Soft Inc.", "1995" ); txt[ 7 ] = new fillArray( "Wibu — Key", "©1999 Copy-Protection.com.", "1999" ); txt[ 8 ] = new fillArray( "Lock & Key", "Timeless Technologies, Inc.", "2009" ); txt[ 9 ] = new fillArray( "Windows Protection Tool-Kit", "Advanced Software Technologies", "2006" ); txt[ 10 ] = new fillArray( "Hardlock Bistro", "Aladdin Knowledge Systems GmbH & Co.", "2007" ); txt[ 11 ] = new fillArray( "Sheriff", "Acudata Limited", "2002" ); function createTable( cStart, cType, cSize, cChange ) { var tabbd = document.getElementById( "tablebody" ); if( !tabbd ) { var table = document.getElementById( "table" ); var tbody = document.createElement( "tbody" ); tbody.id = "tablebody"; table.appendChild( tbody ); tabbd = document.getElementById( "tablebody" ); } while( tabbd.hasChildNodes() ) { var tmp = tabbd.childNodes[ 0 ]; tabbd.removeChild( tmp ); } for( var counter = cStart; eval( counter + cType + cSize ); eval( "counter" + cChange ) ) { var tr = document.createElement( "tr" ); var td = document.createElement( "td" ); var tdtxt = document.createTextNode( txt[ counter ].years ); td.appendChild( tdtxt ); tr.appendChild( td ); td = document.createElement( "td" ); tdtxt = document.createTextNode( txt[ counter ].books ); td.appendChild( tdtxt ); tr.appendChild( td ); td = document.createElement( "td" ); tdtxt = document.createTextNode( txt[ counter ].authors ); td.appendChild( tdtxt ); tr.appendChild( td ); tabbd.appendChild( tr ); } } function allocator( arg ) { if( flag == arg ) { if( sorted == "up" ) { createTable( 0, "<", txt.length, "++" ); sorted = "down"; } else { createTable( txt.length - 1, ">=", 0, "--" ); sorted = "up"; } return; } quickSort( 0, txt.length - 1, arg ); createTable( 0, "<", txt.length, "++" ); flag = arg; } /script> </head> <body> <div id="page-wrap"> <table border="1" id="table"> <tr> <td><a href="javascript:allocator( 'yweight' )">Программа</a></td> <td><a href="javascript:allocator( 'bweight' )">Разработчик</a></td> <td><a href="javascript:allocator( 'aweight' )">Год создания</a></td> </tr> <tbody id="tablebody"></tbody> </table> < <input type="button" onclick="UserList" value="Добавить"/> <script language="JavaScript" type="text/javascript"> createTable( 0, "<", txt.length, "++" ); </script> </div> </body> </html> |
olelukoie,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
var txt = []; var flag; var sorted; function weight( str ) { var retArray = []; for( var i = 0; i < str.length; i++ ) { var tmp = str.charCodeAt( i ); if( tmp >= 1046 && tmp < 1078 ) tmp++; else if( tmp == 1025 ) tmp = 1046; else if( tmp >= 1078 ) tmp++; else if( tmp == 1105 ) tmp = 1078; retArray[ i ] = tmp; } return retArray; } function fillArray( years, books, authors ) { this.years = years; this.yweight = weight( years ); this.books = books; this.bweight = weight( books ); this.authors = authors; this.aweight = weight( authors ); } txt[ 0 ] = new fillArray( "Crypto ++ SDK 3.0", "Copyright © 1997-1999 Sampson Multimedia.", "1997" ); txt[ 1 ] = new fillArray( "Gus", "Gus Communications, Inc.", "2004" ); txt[ 2 ] = new fillArray( "CripKey", "Kenonic Controls Ltd.", "2010" ); txt[ 3 ] = new fillArray( "Microcosm Copy Protection", "Microcosm Copy Protection", "1996" ); txt[ 4 ] = new fillArray( "Dinkey Dongles", "Dinkey Dongles", "2003" ); txt[ 5 ] = new fillArray( "PC Guard", "Copyright © by Blagoje Ceklic", "1998" ); txt[ 6 ] = new fillArray( "SafeSerial OCX для Windows 95, 98, NT, 2000", "Sikander Soft Inc.", "1995" ); txt[ 7 ] = new fillArray( "Wibu — Key", "©1999 Copy-Protection.com.", "1999" ); txt[ 8 ] = new fillArray( "Lock & Key", "Timeless Technologies, Inc.", "2009" ); txt[ 9 ] = new fillArray( "Windows Protection Tool-Kit", "Advanced Software Technologies", "2006" ); txt[ 10 ] = new fillArray( "Hardlock Bistro", "Aladdin Knowledge Systems GmbH & Co.", "2007" ); txt[ 11 ] = new fillArray( "Sheriff", "Acudata Limited", "2002" ); function createTable( cStart, cType, cSize, cChange ) { var tabbd = document.getElementById( "tablebody" ); if( !tabbd ) { var table = document.getElementById( "table" ); var tbody = document.createElement( "tbody" ); tbody.id = "tablebody"; table.appendChild( tbody ); tabbd = document.getElementById( "tablebody" ); } while( tabbd.hasChildNodes() ) { var tmp = tabbd.childNodes[ 0 ]; tabbd.removeChild( tmp ); } for( var counter = cStart; eval( counter + cType + cSize ); eval( "counter" + cChange ) ) { var tr = document.createElement( "tr" ); var td = document.createElement( "td" ); var tdtxt = document.createTextNode( txt[ counter ].years ); td.appendChild( tdtxt ); tr.appendChild( td ); td = document.createElement( "td" ); tdtxt = document.createTextNode( txt[ counter ].books ); td.appendChild( tdtxt ); tr.appendChild( td ); td = document.createElement( "td" ); tdtxt = document.createTextNode( txt[ counter ].authors ); td.appendChild( tdtxt ); tr.appendChild( td ); tabbd.appendChild( tr ); } } txt.push(new fillArray( "Drfrfrf", "HBBuede", "2005" )); createTable( 0, "<", txt.length, "++" ); <table border="1" id="table"> <tr is="formspar"> <td><a href="javascript:allocator( 'yweight' )">Программа</a></td> <td><a href="javascript:allocator( 'bweight' )">Разработчик</a></td> <td><a href="javascript:allocator( 'aweight' )">Год создания</a></td> </tr> <tbody id="tablebody"></tbody> </table> createTable( 0, "<", txt.length, "++" ); |
создание таблицы из массива или localStorage сортировка и добавление
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> |
рони,Добрый вечер, спасибо очень помогли с добавлением данных; Подскажите пожалуйста есть ли возможность сохранять добавленные данные в массив возможностями js. Или только c помощью php?
|
olelukoie,
если только для себя localStorage |
рони, В localStorage.setItem('mykey', 'item') можно добавить всю таблицу сразу или же по строчно?После добавления ломается сортировка. Не могли бы вы показать на моём примере.
|
olelukoie,
в localStorage надо добавлять только массив, в строке 82, и доставать этот массив в строке 17, если он массив в localStorage есть. |
|
рони,То есть добавленную информацию я не как не сохраню?
|
Часовой пояс GMT +3, время: 11:57. |