Пожалуйста, подскажите! Средствами 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>