2013-03-19 3 views
0

У меня есть это, что позволяет пользователям загружать фотографии. Я хотел бы ограничить количество изображений до 4. Сначала он показывает только одно поле ввода, а затем, если пользователь хочет добавить больше, они могут нажать кнопку Button-Add-icon.png, и появится другое поле ввода. Когда они достигают четырех входов, и они решают удалить их, они нажимают кнопку Button-Delete-icon.png.document.createElement не работает над IE 8 и ниже

Все это прекрасно работает на Firefox, Chrome, Seamonkey и IE9. Но он не работает на IE8, IE7 и раньше. Может кто-нибудь дать подсказку о том, как это сделать?

Благодаря

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 
/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Document sans titre</title> 

<script type="text/javascript"> 
    var totalItems = 0; 
    function addItems() 
{ 
    if(totalItems < 3) 
    { 
    var table1 = document.getElementById('tab1'); 
    var newrow = document.createElement("tr"); 
    var newcol = document.createElement("td"); 
    var input = document.createElement("input"); 
    input.type="file"; 
    input.name="image[]"; 
    newcol.appendChild(input); 
    newrow.appendChild(newcol); 
    table1.appendChild(newrow); 
    totalItems++; 
    } else { 
    //Display your message here.. 
     } 
} 


    function remItems() 
{ 
var table1 = document.getElementById('tab1'); 
var lastRow = table1.rows.length; 
if(lastRow>=2) 
{ 
table1.deleteRow(lastRow-1); 
totalItems--; 
} 
} 

</script> 
</head> 

<body> 

<table align="center" border="0" id="tab1" > 
    <tr> 
    <td width="218" align="center"><input type="file" name="image[]" /></td> 
     <td width="54" align="center"><img src="images/Button-Add-icon.png" 
     style="cursor:pointer" onclick="addItems()" /> 
     </td> 
    <td><img src="images/Button-Delete-icon.png" style="cursor:pointer" 
    onclick="remItems()" /> 
    </td> 
    </tr> 
</table> 

    <table align="center" border="0" id="tab2"> 
    </table> 

</body> 
</html> 
+0

Я не 100% уверен, но я думаю, что вместо того, чтобы делать эти присоединяет, вы должны установить innerHTML каждого, чтобы решить проблему, дайте мне скрипку это выяснить. – Ohgodwhy

+0

Почему этот скомпонованный jquery, когда вы вообще не используете jquery? – Cyrus

+0

Переменные 'newrow',' newcol' и 'input' становятся' null' или 'undefined' после вызова' createElement'? Вы получили сообщение об ошибке? Как вы знаете, 'createElement' не работает? – ajp15243

ответ

1

Вы добавляете строку, как ребенок к неправильному элементу.

В таблице HTML всегда есть элемент tbody как дочерний элемент, все элементы tr входят в это. Если вы напишете фрагмент HTML, включая таблицу без элемента tbody, она будет создана автоматически, но при изменении таблицы позже вы должны принять во внимание элемент tbody.

легко исправить, чтобы написать tbody элемент в явном виде, дать ему идентификатор, и вставить новые строки в tbody элемента, а не в table элемента.

<table> 
    <tbody id="tb1"> 
     <tr><td></td></tr> 
    </tbody> 
</table> 
Смежные вопросы