Question

我只能假设我做错了什么，因为当我单步执行javascript时根本找不到对象。

我要做的是动态地向表中添加一排组合框。组合框代码或多或少无关紧要，因为尝试通过遍历表单在DOM中查找新生成的输入似乎不起作用。我不确定它们是否存在。

首先，我有表格本身：

<form name="WEB070EDIT" action="WEB070" method="POST">

然后降低，表中将包含生成的单元格：

<table id='Form2Section2' width="100%" border=0 cellspacing=0 cellpadding=2>
<tr class="woborder">
<th >5. Material or Process Name</th>
<th >6. Specification Number</th>
<th >7. Code</th>
<th >8. Special Process Supplier Code</th>
<th >9. Customer Approval Verification</th>
<th >10. Certificate of Conformance Number</th>
</tr>
</table>

如上所述，我的恶意脚本函数填充了表格：

<script type="text/javascript">
function addForm1(itemId)
{
 if (typeof addForm1.counter == 'undefined') {
 addForm1.counter = 1;
 }
 var object = document.getElementById(itemId);
 var curRow = object.insertRow(-1);
 curRow.className = "woborder";
 curRow.style.backgroundColor = "#D0D0D0";
 var curCell = curRow.insertCell(-1);

 var cellElem = document.createElement("text");
 cellElem.size = 25
 cellElem.value = ""
 cellElem.name = "V_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "V_P2_MATERIAL_"+ addForm1.counter;

 var newAttr = document.createAttribute("onKeyUp");
 newAttr.nodeValue = "...[some lengthy script stuff trimmed for readability]...";
 cellElem.setAttributeNode(newAttr);

 curCell.appendChild(cellElem);

 curCell.appendChild(document.createElement("br"));

 cellElem = document.createElement("hidden");
 cellElem.name = "P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "P2_MATERIAL_" + addForm1.counter;
 cellElem.value = "";

 curCell.appendChild(cellElem);

 cellElem = document.createElement("select");
 cellElem.name = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.size = 10;

 newAttr = document.createAttribute("onClick");
 newAttr.nodeValue = "...[more script stuff here we don't care about]...";

 eval("document.getElementById('V_P2_MATERIAL_" + addForm1.counter + "').focus();");
 eval("combohandleKeyUp('WEB070EDIT','MYSELECT_P2_MATERIAL_" + addForm1.counter + "','V_P2_MATERIAL_" + addForm1.counter + "','P2_MATERIAL_" + addForm1.counter + "',MYLIST_P2_MATERIAL,MYDESCLIST_P2_MATERIAL,9999999);");

}

</script>

我们不关心onClick和onKeyUp的原因是因为我们从未达到过这一点。应该发生的是eval（）应该运行一些javascript，用一些预定义的变量填充组合框。只要输入是静态的，它就可以完美地工作。但是，当我点击运行此脚本的按钮时，它会在开头附近的那个combohandleKeyUp上呕吐，它应该找到以下对象：

document.forms['WEB070EDIT'].elements["P2_MATERIAL_1"]

显然，这是脚本本身内部的所有变量，但这是它根据调试器解析的内容。

当我使用Firebug的DOM检查器时，我可以找到表单，我可以找到WEB070EDIT，但是我找不到隐藏的输入P2_MATERIAL_1。静态的东西都在那里，但没有动态生成的东西。这根本不适用于动态对象吗？我错过了什么吗？我完全错了吗？

Answer 1

我在这里看到了各种各样的问题。

我不明白你为什么要使用eval()。您正在评估的内容可以称为普通的旧JavaScript。第一个eval()可以删除，并在元素添加到DOM后立即对元素进行简单的.focus()调用。

您对此有何看法？

document.createElement("text");

这会在HTML中创建一个<text>标记，但这不是有效标记。你想做这样的事吗？

document.createElement("input");
cellElem.type = 'text';
//...

您正在设置size属性，因此我猜您正在尝试制作<input type="text" .../>。

您正在初始化addForm1.counter，但您永远不会增加它。你最终会得到重复的ID，这会导致咬牙切齿和各种各样的混乱。

您创建了<select>：

cellElem = document.createElement("select");

然后扔掉它，因为你忽略了将它添加到DOM。您还可以在onClick之后立即创建<select>属性，但未将其添加到任何内容。

我将你的代码略微删掉并添加了一些你缺少的东西，似乎工作得很好：http://jsfiddle.net/ambiguous/3v6R3/

Javascript：无法在DOM中找到新添加的表单输入

1 个答案: