Динамическая форма IE8 Ошибка - PullRequest
Новая
       2

Динамическая форма IE8 Ошибка

0 голосов
/ 22 августа 2011

Я пытаюсь создать динамическую форму, которая добавляет элементы в определенную таблицу при нажатии кнопки. Я делаю это, вызывая функцию javascript, которая в этом примере создаст новое текстовое поле с именем и типом «item_3» со ссылкой на удаление рядом с ним. Веб-страница прекрасно работает в Firefox и Chrome, возможно, из-за того, что они не используют W3C строго как Internet Explorer. Он не будет работать в IE8 и выдаст ошибку «Unknown Runtime Error». Я уверен, что эта проблема связана с DOM и тем, как я использую свои элементы, но мне нужен способ динамического добавления элемента в конкретную таблицу. Вот голова: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<script language="Javascript" type="text/javascript"> 

//Add more fields dynamically.
function addField(area,type) 
{
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area); //Select table to insert element

    //Example, i want a textbox with id and name as item_3
    var type = "item_";
    var count = "3";

    //Add html to insertiontable table
    field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";
}

</script> 
</head>

Раздел тела содержит мою форму. Есть две таблицы, table1 и вставляемый. Таблица 1 содержит текстовое поле и кнопку для вставки нового элемента "item_3" в вставляемую таблицу. 

<body>

<form name="newbookform1" method="post" action =""> 
<!--Table one-->
<table id="table1" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td><strong>What:</strong></td><td><input type="text" name="item_1" id="item_1" /></td><td><input type="button" value="Add New Item Type"     onclick="addField('insertiontable','item_');" /></td></tr>
</table>

<!--Table two-->
<table id="insertiontable" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td colspan="2"><input type="text" name="item_2" id="item_2" /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"> Remove Box</a></td></tr>
</table>

</form> 

</body>
</html>

Очистка этого - головная боль для меня, как это может работать в IE8 с верным HTML? Ваша помощь очень ценится.

Ответы [ 3 ]

0 голосов
/ 22 августа 2011

Вот похожий вопрос: Проблема добавления строк в Javascript / Dom Object в Internet Explorer

Я согласен либо с использованием jQuery для манипулирования dom, либо с использованием методов dom, предоставляемых javascript.

0 голосов
/ 22 августа 2011

Это должно работать:

заменить: 

 //Add html to insertiontable table
    field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";

с: 

var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerHTML = "<input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a>";
row.appendChild(cell);
field_area.appendChild(row);

Проще говоря - innerHTML для таблиц испорчен. Вам нужно поместить строку HTML в ячейку, а затем добавить ячейку в строку, а строку в таблицу.

0 голосов
/ 22 августа 2011

IE очень забавно модифицировать таблицы с помощью JavaScript.Вы должны использовать document.createElement.Это должно работать для вас. 

//Add html to insertiontable table
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td');

    td.setAttribute('colspan', '2');

    var inp = document.createElement('input');
    inp.setAttribute('type', 'text');
    inp.setAttribute('name', 'item_' + count);
    inp.setAttribute('id',  'item_' + count);

    var a = document.createElement('a');
    a.setAttribute('style', 'cursor:pointer;color:blue;');
    a.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
    a.innerText = " Remove Box";

    td.appendChild(inp);
    td.appendChild(a);

    tr.appendChild(td);
    tbody.appendChild(tr);

    field_area.appendChild(tbody);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...