18.12.2018, 00:34
|
Интересующийся
|
|
Регистрация: 18.12.2018
Сообщений: 10
|
|
Добавить форму которая будет добавлять данные в массив.
Помогите пожалуйста. Нужно добавить на страницу форму, которая будет добавлять данные в массив. Скидываю всё что есть вместе с сортировкой.
<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>
|
|
18.12.2018, 07:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
olelukoie,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
18.12.2018, 11:37
|
Интересующийся
|
|
Регистрация: 18.12.2018
Сообщений: 10
|
|
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, "++" );
|
|
18.12.2018, 13:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
создание таблицы из массива или 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>
Последний раз редактировалось рони, 19.12.2018 в 15:27.
|
|
18.12.2018, 21:53
|
Интересующийся
|
|
Регистрация: 18.12.2018
Сообщений: 10
|
|
рони,Добрый вечер, спасибо очень помогли с добавлением данных; Подскажите пожалуйста есть ли возможность сохранять добавленные данные в массив возможностями js. Или только c помощью php?
|
|
18.12.2018, 23:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
olelukoie,
если только для себя localStorage
|
|
19.12.2018, 02:45
|
Интересующийся
|
|
Регистрация: 18.12.2018
Сообщений: 10
|
|
рони, В localStorage.setItem('mykey', 'item') можно добавить всю таблицу сразу или же по строчно?После добавления ломается сортировка. Не могли бы вы показать на моём примере.
|
|
19.12.2018, 07:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
olelukoie,
в localStorage надо добавлять только массив, в строке 82, и доставать этот массив в строке 17, если он массив в localStorage есть.
|
|
19.12.2018, 07:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
19.12.2018, 13:18
|
Интересующийся
|
|
Регистрация: 18.12.2018
Сообщений: 10
|
|
рони,То есть добавленную информацию я не как не сохраню?
|
|
|
|