Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.12.2018, 00:34
Интересующийся
Отправить личное сообщение для olelukoie Посмотреть профиль Найти все сообщения от olelukoie
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 18.12.2018, 07:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

olelukoie,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 18.12.2018, 11:37
Интересующийся
Отправить личное сообщение для olelukoie Посмотреть профиль Найти все сообщения от olelukoie
 
Регистрация: 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, "++" );
Ответить с цитированием
  #4 (permalink)  
Старый 18.12.2018, 13:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

создание таблицы из массива или 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.
Ответить с цитированием
  #5 (permalink)  
Старый 18.12.2018, 21:53
Интересующийся
Отправить личное сообщение для olelukoie Посмотреть профиль Найти все сообщения от olelukoie
 
Регистрация: 18.12.2018
Сообщений: 10

рони,Добрый вечер, спасибо очень помогли с добавлением данных; Подскажите пожалуйста есть ли возможность сохранять добавленные данные в массив возможностями js. Или только c помощью php?
Ответить с цитированием
  #6 (permalink)  
Старый 18.12.2018, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

olelukoie,
если только для себя localStorage
Ответить с цитированием
  #7 (permalink)  
Старый 19.12.2018, 02:45
Интересующийся
Отправить личное сообщение для olelukoie Посмотреть профиль Найти все сообщения от olelukoie
 
Регистрация: 18.12.2018
Сообщений: 10

рони, В localStorage.setItem('mykey', 'item') можно добавить всю таблицу сразу или же по строчно?После добавления ломается сортировка. Не могли бы вы показать на моём примере.
Ответить с цитированием
  #8 (permalink)  
Старый 19.12.2018, 07:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

olelukoie,
в localStorage надо добавлять только массив, в строке 82, и доставать этот массив в строке 17, если он массив в localStorage есть.
Ответить с цитированием
  #9 (permalink)  
Старый 19.12.2018, 07:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

olelukoie,
https://javascript.ru/forum/misc/727...tml#post479258
строка 25 и 32
Ответить с цитированием
  #10 (permalink)  
Старый 19.12.2018, 13:18
Интересующийся
Отправить личное сообщение для olelukoie Посмотреть профиль Найти все сообщения от olelukoie
 
Регистрация: 18.12.2018
Сообщений: 10

рони,То есть добавленную информацию я не как не сохраню?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция, которая по клику вытягивает данные и выводит их Maxsl_89 Элементы интерфейса 2 21.10.2013 16:10
Ищу функцию для canvas, которая будет перемещать мой объект на позицию х,у eko24 Events/DOM/Window 0 12.10.2013 00:33
Динамическое создание iframe в Firefox mrbean11 Firefox/Mozilla 8 02.11.2012 21:23
Проверить данные в функции, которая работает с другой функцией. Andrej_2 Общие вопросы Javascript 5 27.09.2012 22:42
Добавить в массив avtomatpro Общие вопросы Javascript 2 08.04.2012 02:24