动态窗体IE8错误

我试图创建一个动态窗体，单击按钮时在某个表中添加元素。我通过调用一个javascript函数来完成此操作，在本例中，将创建一个名称和类型为“item_3”的新文本框，并在其旁边具有删除链接。该网页在firefox和chrome中运行得很好，可能是因为它们并不严格使用W3C（如Internet Explorer）。它不会在IE8中运行，并会出现错误“未知运行时错误”。我确信这个问题与DOM有关，以及我如何使用我的元素，但我需要一种在特定表中动态添加元素的方法。这里是头：动态窗体IE8错误

<!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和可插入表格。表一包含一个文本框以及一个用于将新的“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工作呢？非常感谢您的帮助。

来源

2011-08-22 xoxo Jenny Shu oxox

对于使用javascript修改表，IE真的很有趣。你必须使用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);

来源

2011-08-22 18:54:48

您还必须在IE中添加行时使用tbody。我在很长一段时间里没有用JavaScript做很多事情，所以我只是把这些代码放在头顶，但是我测试了它，它确实起作用。我也建议你看看jQuery。 –

请记住，“innerText”不适用于所有浏览器。请参阅：http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox。 “setAttribute与”style“一起使用也不适用于所有浏览器。请参阅：http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html –

好点@TJ。我忘了在这里，jQuery确实是最好的解决方案 –

这里有一个类似的问题：Internet Explorer Javascript/ Dom Object add rows problem

我要么使用jQuery做DOM操作或使用由JavaScript提供的DOM方法达成一致。

来源

2011-08-22 18:56:38

这应该工作：

取代：

//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字符串放到一个单元格中，然后将该单元格追加到一行中，并将该行添加到表格中。

来源

2011-08-22 19:09:40 ZenMaster

动态窗体IE8错误

回答

相关问题