动态表单 IE8 错误答案

【问题标题】：Dynamic Form IE8 Error动态表单 IE8 错误
【发布时间】：2011-08-23 03:53:07
【问题描述】：

我正在尝试创建一个动态表单，当单击按钮时，它会在某个表格中添加元素。为此，我调用了一个 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 和插入表。表一包含一个文本框和一个按钮，用于将新的“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 工作？非常感谢您的帮助。

【问题讨论】：

标签： javascript html forms internet-explorer

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这应该可行：

替换：

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

【讨论】：

【解决方案3】：

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

【讨论】：

在 IE 中添加行时还必须使用 tbody。我很久没有用 JavaScript 做太多事情了，所以我只是把这些代码放在我的脑海中，但是我测试了它并且它确实有效。我还建议你看看 jQuery。
请记住，“innerText”并非在所有浏览器中都有效。见：stackoverflow.com/questions/1359469/…。 "setAttribute 与 "style" 也不会在所有浏览器中工作。请参阅：quirksmode.org/bugreports/archives/2005/03/…
好点@TJ。我忘记了。 jQuery 确实是这里最好的解决方案。
太棒了！虽然在 Firefox 中删除框会出现，但遗憾的是在 IE 中删除框不是超链接，也无法点击。
哦，这就解释了。 @TJ 和 Johnie，你们认为你们可以找到使用 jQuery 做同样事情的替代方法吗？