动态表单IE8错误

时间:2011-08-22 18:27:00

标签: javascript html forms internet-explorer

我正在尝试创建一个动态表单,在单击按钮时在某个表中添加元素。我通过调用一个javascript函数来执行此操作,在此示例中,该函数将创建一个新文本框,其名称和类型为“item_3”,旁边有删除链接。这个网页在firefox和chrome中运行得很好,可能是因为他们没有严格使用像Internet Explorer一样的W3C。它不会在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和placementtable。表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 :(得分:0)

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);

答案 1 :(得分:0)

这是一个类似的问题:Internet Explorer Javascript/ Dom Object add rows problem

我同意使用jQuery进行dom操作或使用javascript提供的dom方法。

答案 2 :(得分:0)

这应该有效:

取代:

 //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字符串放入单元格中,然后将单元格附加到行,将行附加到表格。