Добавить строчку и этим пополнить массив
Пожалуйста, подскажите! Средствами javascript нужно сделать кнопку для добавления в таблицу нового товара, т.е. чтобы после нажатия на кнопку можно было заполнить данные для нового товара, массив пополнился и таблица заново прорисовалась!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="author" content="А.Дуванов">
<TITLE>Магазин флэшек</TITLE>
<table id="tab1" class="sortable">
</head>
<body>
<script>
function addrow ()
{
var tbody = document.getElementsByTagName("tbody")[0]; // Получаем ссылку на tbody
var row = tbody.insertRow(tbody.rows.length); // Добавляем строку
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var name = tbody.insertRow(tbody.rows.length);
// Формируем строку элементов управления
var check = document.createElement("input");
check.setAttribute("type", "checkbox");
check.setAttribute("name", "check");
check.setAttribute("class", "check");
check.setAttribute("value", "test");
cell1.appendChild(check);
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("size", "25");
text.setAttribute("name", "text");
text.setAttribute("class", "text");
text.setAttribute("value", "test");
cell2.appendChild(text);
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("size", "25");
file.setAttribute("name", "att[]");
cell3.appendChild(file);
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("size", "25");
text.setAttribute("name", "text");
text.setAttribute("class", "text");
text.setAttribute("value", "test");
cell4.appendChild(text);
var num = document.createElement("input");
num.setAttribute("type", "num");
num.setAttribute("size", "4");
num.setAttribute("name", "num");
num.setAttribute("class", "num");
num.setAttribute("value", "1");
cell5.appendChild(num);
var num = document.createElement("input");
num.setAttribute("type", "num");
num.setAttribute("size", "8");
num.setAttribute("name", "num");
num.setAttribute("class", "num");
num.setAttribute("value", "500");
cell6.appendChild(num);
tbody.appendChild(row);
}
</script>
<SCRIPT language=JavaScript>
<!--
function product(name, pict, description, price)
{
this.name=name;
this.pict=pict;
this.description=description;
this.price=price;
return this;
}
// Описание товаров
var items = new Array(
new product("Флэшка 2ГБ",
"flash1.jpg",
"хорошая флэшка",
"500"
),
new product("Флэшка 4ГБ",
"flash3.jpg",
"очень хорошая флэшка",
"750"
),
new product("Флэшка 8ГБ",
"flash2.jpg",
"ещё лучше флэшка",
"1000"
)
);
var itname = new Array(
new product("","","","")
);
var k=1;
function sorted()
{
var ind;
var ind2;
for(ind2=0; ind2<items.length-1; ind2++)
{
for(ind=0; ind<items.length-1; ind++)
{
if (items[ind].name<items[ind+1].name)
{
itname[0]=items[ind];
items[ind]=items[ind+1];
items[ind+1]=itname[0];
}
}
}
if (k==1) {items.reverse(); }
k*=-1;
for(ind=0; ind<items.length; ind++)
{
eval("name"+ind+".textContent=items[ind].name;");
eval("description"+ind+".textContent=items[ind].description;");
eval("price"+ind+".textContent=items[ind].price;");
eval("document.getElementById('pict"+ind+"').src=items[ind].pict;");
}
}
function isNum(num)
{
//if (isNaN(num)) return false;
if (num==''|| num<1 || isNaN(num)) return false;
for (i in num) if (num.charAt(i)==' ') return false;
for (i in num) if (num.charAt(i)=='.') return false;
return true;
}
// Название магазина
var shopname = 'Магазин с флэшками';
// Конструктор объекта, содержащего информацию о товаре
// name - название товара
// description - описание товара
// price - цена товара
// Выполнение команды "Сумма заказа"
function summa()
{
var sum=0;
for(var i=0; i<items.length; i++)
if(eval("document.shop.num"+i+".checked"))
{
// если в строке "Количество" -- не число, сообщить пользователю
if (!isNum(eval("document.shop.kol"+i+".value")))
{
alert('Неверно задано количество товара "'+items[i].name+'"'+
'\nКол-во должно быть целым и больше 0'
);
return;
}
sum += eval("document.shop.kol"+i+".value*items[i].price");
}
document.shop.showsum.value=sum;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#DFD8C5" text="black">
<SCRIPT language=JavaScript>
<!--
document.write("<H2>"+shopname+"</H2>")
//-->
</SCRIPT>
<HR>
<P>
Отметьте товары, которые вам нужны.
<FORM name=shop>
<TABLE id="tab1" bgcolor=#FFFF00 border=0 cellspacing=0 cellpadding=10>
<TR align=left>
<TH> </TH>
<TH id="gname">Название</TH>
<SCRIPT language=JavaScript>
<!--
document.getElementById('gname').onclick = function() {
sorted();
}
//-->
</SCRIPT>
<TH id="pict">Изображение</TH>
<SCRIPT language=JavaScript>
<!--
document.getElementById('pict').onclick = function() {
sorted();
}
//-->
</SCRIPT>
<TH id="description">Описание</TH>
<SCRIPT language=JavaScript>
<!--
document.getElementById('description').onclick = function() {
sorted();
}
//-->
</SCRIPT>
<TH id="kol">Количество</TH>
<SCRIPT language=JavaScript>
<!--
document.getElementById('kol').onclick = function() {
sorted();
}
//-->
</SCRIPT>
<TH id="price">Цена</TH>
<SCRIPT language=JavaScript>
<!--
document.getElementById('price').onclick = function() {
sorted();
}
//-->
</SCRIPT>
</TR>
<SCRIPT language=JavaScript>
<!--
// Построение строк таблицы товаров
var ind;
for(ind=0; ind<items.length; ind++)
document.write("<TR valign=top><TD align='center' valign='center'><INPUT name=num"+ind+
" type=checkbox onChange='summa()'></TD>"+
"<TD id='name"+ind+"' valign='center'>"+items[ind].name+"</TD>"+
"<TD valign='center'><img id='pict"+ind+"' src="+items[ind].pict+" max-width:10%></TD>"+
"<TD id='description"+ind+"' valign='center'>"+items[ind].description+"</TD>"+
"<TD valign='center'><INPUT name=kol"+ind+" type=text size=4 value=1 onChange='summa()'></TD>"+
"<TD id='price"+ind+"' valign='center'>"+items[ind].price+"</TD></TR>");
//-->
</SCRIPT>
<tbody><H3><U> Информация о товаре </U></H3></tbody>
</TABLE>
<br>
<input id="add" type="button" name="add" value="Добавить" onclick="addrow ()"/>
<INPUT type=button value="Сумма заказа" onclick="summa()">
<INPUT name=showsum type=text value="" size=20>
<INPUT type=reset value="Сброс">
</FORM>
</BODY>
</HTML>
|
Для начала половину кода можно было не размножать:
function addrow() {
var tbody = document.getElementByTagName('tbody')[0];
var row = document.createElement('TR');
tbody.appendChild(row);
var f = function(fieldType, params){
var cell = document.createElement('TD');
var field = document.createElement(fieldType);
for (var key in params) {
field.setAttribute(key, params[key])
}
cell.appendChild(field);
row.appendChild(cell);
};
f('INPUT', {type: 'checkbox', name: 'check', 'class': 'check', value: 'test'});
f('INPUT', {type: 'text', ...});/*Вместо многоточия напиши все необходимые параметры*/
f('INPUT', {...});/*Вместо многоточия напиши все необходимые параметры*/
f('INPUT', {...});/*Вместо многоточия напиши все необходимые параметры*/
f('INPUT', {...});/*Вместо многоточия напиши все необходимые параметры*/
f('INPUT', {...});/*Вместо многоточия напиши все необходимые параметры*/
}
Таблицу перерисовывать после добавления товара - а на кой это нужно? Добавляй новые строки в конец таблицы через tbody.appendChild и всё. Только на всякий случай проверяй, что у нужной таблицы есть этот tbody... мало ли какой браузер попадется... Создать кнопку ты и так можешь - у тебя в твоем коде есть все операции, которые необходимо для этого знать. Чтобы навесить событие, используй button.onclick = function(e){};, где вместо function(e){} подставляй функцию, которую хочешь. По клику на кнопке открываешь форму для заполнения. После заполнения проверяешь и создаешь новую строку для таблицы... |
Сама функция addrow у меня не правильная, нужно сделать чтобы массив, в котором значения с уже существующими товарами, пополнялся введёными значениями со стороны клиента, это нужно для того чтобы всесте с новыми введёнными товарами выполнялась сортировка, считалась сумма и т.д. Может это как то через метод push нужно делать?
|
Во-первых, код неаккуратный, тяжело прочитать.
Во-вторых, ты фанатеешь от document.write. А чем тебе не нравится работа с DOM-деревом через appendChild или JQuery.append() ? Вот почитай http://learn.javascript.ru/document-write В-третьих, мухи, котлеты и все прочее у тебя перемешано. Скрипты лучше не размазывать по всей странице... Далее, твоя addrow() создает строку для добавления новой позиции. Либо тебе надо сделать кнопку, чтобы пользователь кликнул по ней и пошла проверка введенных данных (сейчас там только поля для ввода создаются), либо на всех полях отслеживать нажатие Ввода (то ли keypress, то ли keydown - сам никак не запомню) и инициировать проверку введенных данных. В ней, если все ОК, то сначала строишь новый объект типа new product(), который методом push или items[items.length - 1] кладешь в массив items. Разумеется, items надо объявить так, чтобы он был доступен во всех необходимых областях видимости. Далее вызываешь сортировку массива в своей функции sorted(), а дальше с помощью appendChild() перестраиваешь таблицу. Поскольку все эти операции совершаются с одним единственным элементом, на твоем месте я бы предусмотрел поиск позиции для вставки единственного элемента в массив и также вставку единственного элемента в таблицу - это работало бы намного быстрее, чем новая обработка всех данных, несмотря на более сложный код. |
А можешь подробнее написать как сделать чтобы эти данные попадали в массив или скинуть ссылку на примеры подобных заданий?
|
http://javascript.ru/tutorial/foundation/structure - читай про область видимости переменных
http://javascript.ru/Array - изучай методы и свойства массивов Из полученных знаний и моего поста вполне можно собрать код, который будет выполнять поставленную задачу. |
теперь пополнить массив получается, но пополнить его можно только тем, что указано в коде, например:
var pushed = items.push(new product("ololo","flash.jpg","ololo","ololo"));
но как сделать, чтобы после нажатия на кнопку открывались поля для ввода и то что будет введено в них попадало в массив? |
У тебя неверная "архитектура".
Поскольку с массивом items предполагается работа из нескольких функций, значит один единственный экземпляр должен быть доступен для работы во всех функциях. Для этого нужно сделать его глобальным. т.е. объявить так window.items = []; Всякий раз, когда ты так или иначе добавляешь элемент, ты должен писать window.items.push(new product(/*Здесь все параметры нового продукта*/)); или window.items[window.items.length - 1] = new product(/*Здесь все параметры нового продукта*/); Во всех функциях (сортировка и т.д.) также обращаешься к глобальному массиву window.items. Теперь про форму добавления. От тега FORM для удобства (и чтобы он не смущал особенностями своей работы) лучше отказаться. Задай строке TR с полями ввода некоторый id, например id="FORM_NEW_PRODUCT". Каждому полю ввода в этой форме задай атрибут name, соответствующий назначению поля, например name= name, pict, description, price. Сделай простую кнопку (не submit), на нажатие которой повесь функцию типа:
function aggregateData(){
var data = {};
$('#FORM_NEW_PRODUCT').find('input,select').each(function(){
var name = $(this).attr('name');
name && (data[name] = $(this).val());
});
window.items.push(new product(data));
$('#FORM_NEW_PRODUCT').remove();/*Удаляем строку за ненадобностью*/
/*Здесь можешь также передать полученный data в функцию, которая добавит строку с полученными данными о новом продукте в таблицу*/
}
а функцию product() переделай вот так:
function product (params) {
if (params && typeof params === typeof {}) {
for (var key in params) {
this[key] = params[key];
}
}
return this;
}
Учись использовать JQuery - даже Яндекс его использует. Для общего развития почитай о вреде глобальных переменных и пользе пространств имен. |
| Часовой пояс GMT +3, время: 18:19. |