我遇到的问题是“addedItems”表在 IE 9 中不显示，但在 Firefox 30 上使用时会正常显示。在 IE 中，它发送发布数据，当我使用开发人员工具检查 HTML 时，它会在页面上显示 html 元素。我尝试查看是否将表格显示设置为阻止，但没有任何变化。
此代码的目的是允许用户从下拉列表中选择他们想要添加的设备类型，然后能够将任意数量的项目从 Foo 或 Bar 列表添加到要添加的表格中。在 items[] post 变量中发送。该表每行还设有一个删除按钮，以便用户可以取出错误添加的设备。
这是 HTML 文件:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<form method="post">
<ul>
<li id="EquipmentSelector" >
<label for="EquipmentType">Equipment Type</label>
<div>
<select id="EquipmentType" name="EquipmentType">
<option value="" selected="selected"></option>
<option value="0" >Foo</option>
<option value="1" >Bar</option>
</select>
</div>
</li>
<li id = "FooHolder">
<label class="description" for="Foo">Foo</label>
<select id="Foo">
<option value="" selected="selected"></option>
<option value="0" >Foo Zero</option>
<option value="1" >Foo One</option>
<option value="2" >Foo Two</option>
<option value="3" >Foo Three</option>
</select>
<input type = "button" value = "Add Foo" id = "FooClick" ></input>
</li>
<li id = "BarHolder">
<label class="description" for="Bar">Bar</label>
<select id="Bar">
<option value="" selected="selected"></option>
<option value="0" >Bar Zero</option>
<option value="1" >Bar One</option>
<option value="2" >Bar Two</option>
<option value="3" >Bar Three</option>
</select>
<input type = "button" value = "Add Bar" id = "BarClick" ></input>
</li>
<li>
<table>
<tbody id = "addedItems">
</tbody>
</table>
</li>
<li>
<input type= "submit" id="saveForm" name="submit" value="Submit" />
</li>
</ul>
</form>
<script src = "IEerror.js"></script>
</body>
</html>
这是 IEerror.js 文件:
function prepareEventHandlers(){
document.getElementById("EquipmentType").onchange = function(){
var equipType = document.getElementById("EquipmentType").value
if(equipType === "1"){
document.getElementById("BarHolder").style.display = "block";
document.getElementById("FooHolder").style.display = "none";
} else if(equipType === "0"){
document.getElementById("FooHolder").style.display = "block";
document.getElementById("BarHolder").style.display = "none";
}
}
document.getElementById("FooHolder").style.display = "none";
document.getElementById("BarHolder").style.display = "none";
function removeDiv() {
var parentId = $(this).parent().parent().attr("id");
$('#' + parentId).remove();
}
var myNum = 0;
function addItem(getFromId){
var addTag = document.getElementById("addedItems");
var addVariable = document.getElementById(getFromId).value;
var possibleId = getFromId + addVariable;
if(!document.getElementById(possibleId)){
var newTr = document.createElement("tr");
newTr.id = possibleId;
var myText = $('#'+ getFromId).find(":selected").text();
var newTd = document.createElement("td");
newTd.appendChild(document.createTextNode(myText));
newTr.appendChild(newTd);
addTag.appendChild(newTr);
var submissionInput = document.createElement("input");
submissionInput.name = "item[]";
submissionInput.type = "hidden";
submissionInput.value = myText;
newTd.appendChild(submissionInput);
var deleteInput = document.createElement("input");
deleteInput.type = "button";
deleteInput.value = "Delete";
deleteInput.id = myNum;
myNum += myNum;
deleteInput.onclick = removeDiv;
var deleteTd = document.createElement("td");
deleteTd.align = "right";
document.getElementById(possibleId).appendChild(deleteTd);
deleteTd.appendChild(deleteInput);
}
}
document.getElementById("BarClick").onclick = function(){
addItem("Bar");
};
document.getElementById("FooClick").onclick = function(){
addItem("Foo");
};
};
window.onload = function(){
prepareEventHandlers();
};
编辑:
这里是 jsfiddle 的链接:http://jsfiddle.net/DTCav/xJVJR/1/
最佳答案
多么糟糕的代码，但是让我们开始吧:
验证您的 HTML。即您的
<html>包含 HTML5<header>而不是<head>为什么要互相使用原生 JS 和 jQuery？为什么不坚持使用 jQuery？
无论如何，我的挑剔
<aside>，要解决您的问题，请更改您的<table>代码写入:<table> <tbody id="addedItems"> </tbody> </table>
这是因为 IE9 会生成一个空的 <tbody>在一个空的<table>并将其用作表占位符，您注入(inject) <tr>和<td>标签直接进入 <table>
关于javascript - IE 9 不显示由 js 填充的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24390466/