HTML+CSS+JavaScript

Почему при выборе через обзор файл(<input type='file'>) и при дальнейшем динамическом добавлении чере innerHTML такогоже <input type='file' name='filez[]'> происходит очистка выбранной инфы из приведущего input ? как этого избежать?

А где у вас находится первый input и куда вы вставляете второй?
Можно пример кода?

Первого нету нигде пока человек не нажмет на нужный ему элемент

вот пример:
ячейка при нажатии на которую появляется input

<td bgcolor=000000  onclick="add_col(this.bgColor);">&nbsp;</td>

а вот функция которая вставляет в div заданный ранее мною эту инфу

function add_col(color){     tbl = document.getElementById('inner_table');     tbl.innerHTML += "<table cellspacing=5 border=0 style='border:#000000 solid 0px;border-collapse: collapse;'><tr><td style='border:#000000 solid 1px;width:60px;height:10px;' bgcolor="+color+"><input name='color[]' type='hidden' value="+color+"></td><td style='PADDING-LEFT: 10px;'> <input name='name_color[]' style='width:5cm;' type='text'></td><td> <input name='filez[]' style='width:400;' class=input type='file'> <td></tr></table>";

}

Вот так работает:

<script language="JavaScript"> function add_col(color){     tbl = document.getElementById('inner_table');     child = document.createElement('table');     child.setAttribute('cellspacing', '5');     child.setAttribute('border', '0');     child.setAttribute('style', 'border:#000000 solid 0px;border-collapse: collapse;');     child.innerHTML = '<tr><td style="border:#000000 solid 1px;width:60px;height:10px;" bgcolor='+color+'><input name="color[]" type="hidden" value="'+color+'"></td><td style="PADDING-LEFT: 10px;"> <input name="name_color[]" style="width:5cm;" type="text"></td><td> <input name="filez[]" style="width:400;" class=input type="file"> <td></tr>';     tbl.appendChild(child); }     </script>

Запись с использованием оператора +=
tbl.innerHTML += "добавление html-кода";
равносильна записи
tbl.innerHTML = tbl.innerHTML + "добавление html-кода";

А последнее, в свою очередь, элементарный оператор присваивания, который, ПЕРЕПИСЫВАЯ innerHTML с начала и до конца, никак не сохраняет интерактивно введённые значения элементов.

Чтобы значения, введённые юзером в предыдущие инпуты, сохранились, надо новые элементы добавлять DOM-методами, т.е. не затрагивая предыдущих элементов.

Т.е. надо один раз:
1) создать глобальный объект myTABLE методом createElevent;
2) методами insertRow и insertCell вставить в этот объект строки и ячейки;
3) в ячейки методом innerHTML вписать инпуты;
4) присвоить ячейкам и инпутам необходимые параметры стиля.

Ну а потом, в функции add_col(color) клонировать этот глобальный объект myTABLE методом cloneNode (true), т.е. с сохранением вложенных в объект дочерних элементов, изменить color в нужном месте клонированного объекта и "приживить" клон в DIV'е методом appendChild

Понятия не имею как это возможно написать ... если не затрудник простенький пример или хотябы описания createElevent insertRow и insertCell , appendChild что ето и как они работуют

Ну, думаю, под простенький пример и мой сгодится =)
Про insertRow и insertCell ничего сказать не могу, эти методы не входят в стандарт DOM.
А вообще, сюда - http://ru.wikipedia.org/wiki/DOM,
сюда - http://www.mozilla.org/docs/dom/domref/dom_shortIX.html,
ну, и на крайний случай, сюда - http://www.google.ru/search?hl=ru&newwindow=1&q=Document+Object+Model+%26%26+Javascript&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&lr=lang_ru

Спасибо более мене понял но в вашем примере выскакивает неопределенная ошибочка :(

<script type="text/javascript"> var count=0; var Obj='p<?=$id?>'; function AddForm(){     count++;     var newFileSmall = document.createElement("<INPUT TYPE='File' NAME='"+Obj+"_"+count+"'>");     var newNBSP = document.createElement("&nbsp;");     var newFileBig = document.createElement("<INPUT TYPE='File' NAME='"+Obj+"b_"+count+"'>");     var newBR = document.createElement("<BR>");     var newHR = document.createElement("<hr>");     imgs.appendChild(newFileSmall);     imgs.appendChild(newNBSP);     imgs.appendChild(newFileBig);     imgs.appendChild(newBR);     imgs.appendChild(newHR);     document.forms.imgs.num.value=Number(document.forms.imgs.num.value)+1; } </script> <p><a href="" onClick="AddForm();return false;">+ поле</a></p> <form action='' method='post' enctype='multipart/form-data'  name="imgs" id="imgs"> <input type='submit'  value='сохранить'><br><br> <input type='text' name='num' value='<?=$count?>'><br> </form>

а почему вот сдесь ошибку выдает неопределенную ? :\

<script language="JavaScript">  function add_col(color){      tbl = document.getElementById('inner_table');      child = document.createElement('table');      child.setAttribute('cellspacing', '5');      child.setAttribute('border', '0');      child.setAttribute('style', 'border:#000000 solid 0px;border-collapse: collapse;');      child.innerHTML = '<tr><td style="border:#000000 solid 1px;width:60px;height:10px;" bgcolor='+color+'><input name="color[]" type="hidden" value="'+color+'"></td><td style="PADDING-LEFT: 10px;"> <input name="name_color[]" style="width:5cm;" type="text"></td><td> <input name="filez[]" style="width:400;" class=input type="file"> <td></tr>';      tbl.appendChild(child);  }      </script>

Глюк ослика =)
Сейчас попробуем исправить.

Вариант AlexSol - IE only =(

Глупенький ослик, не понимает table без tbody!

<table width="100%" cellspacing="5" border="0"> <tr> <td bgcolor=000000 onclick="add_col(this.bgColor);">&nbsp;</td> </tr> </table> <div id="inner_table"></div> <script language="JavaScript"> function add_col(color){ div = document.getElementById('inner_table'); var tbl = document.createElement('table'); tbl.setAttribute('cellspacing', '5'); tbl.setAttribute('border', '0'); tbl.setAttribute('style', 'border:#000000 solid 0px;border-collapse: collapse;'); var row = document.createElement('tr'); var cell = document.createElement('td'); cell.setAttribute('style', 'border:#000000 solid 1px;width:60px;height:10px;'); cell.setAttribute('bgcolor', color); cell.innerHTML = '<input name="color[]" type="hidden" value="'+color+'">'; row.appendChild(cell); cell = document.createElement('td'); cell.setAttribute('style', 'padding-left:10px;'); cell.innerHTML = '<input name="name_color[]" style="width:5cm;" type="text">'; row.appendChild(cell); var cell = document.createElement('td'); cell.innerHTML = '<input name="filez[]" style="width:400;" class=input type="file">'; row.appendChild(cell); tbody = document.createElement('tbody'); tbody.appendChild(row) tbl.appendChild(tbody); div.appendChild(tbl); } </script>

cell.setAttribute('style', 'border:#000000 solid 1px;width:60px;height:10px;');      cell.setAttribute('bgcolor', color);

не пашет IE Only

Ну, тогда заменяем эти строки вот на такие:

cell.style.border = '#000000 solid 1px';     cell.style.width  = '60px';     cell.style.height = '10px';     cell.style.backgroundColor = color;

мда уш грамоздко все очень выходит :( , но тем немеее примного благодарен за демонстрацию другого подхода

кстати
вот так он добовляет тоесть алертом я вывожу innerHTML diva и вижу что style мой прописанн но визуально я этого не вижу :( почему такое происходит?

cell.style.setAttribute('style', 'border:#FF0020 solid 1px;width:60px;height:10px;');

Вот хоть убейте как только не делал чтобы border появился нефига все попытки равны нулю хотя видно что цвет сужается по высотам но цвет border практически анрил задать :(

Это проблема только IE, ну не хочет он нормально работать с DOM.
Единственный выход - использовать несколько операторов cell.style....

cell.style.border = '#000000 solid 1px'; я какраз про несколько и говорю операторов.. то что как я только не мучал не пашет :( чтоб обводку дать td...

Странно, а где смотрите?
Проверил в FF 1.5, FF 2.0, Opera 8.0, Opera 9.0, IE 6.0, NN 8.0 - везде рамка выводится.

IE6 :( в остальны не спорю все гуд

еще проблема такая возникает передаю в функцию this.form и не могу обратится к значениям вставленных этим методом

function sub(obj){     var str = obj.name_color.value;      alert(str); }

где obj = this.form;

тоесть мне нужно както обратится JS к инпуту у которого имя такого рода "filez[]"

obj.elements['filez[]'][0].value это если эл. с именем filez[] не менее двух, если он один, то - без [0]. Или obj.getElementsByName('filez[]')[0].value

спасибо, совсем забыл про elements .. а вот то что border в IE не работает для меня так и останется загадкой ... везде работает в IE НЕТ :) обычно вроде все наоборот..

хотя щяс почемуто не в одном браузере не работает

var cell = document.createElement('td');      cell.setAttribute('style', 'border:#000000 solid 1px;width:60px;height:10px;');    //    cell.style.border = '#000000 solid 1px';     cell.style.width  = '60px';      cell.style.backgroundColor = color;     cell.innerHTML = '<input name="color[]" type="hidden" value="'+color+'">';