ie9不显示由js填充的表
IE 9 not showing table populated by js
我有一个问题,' adddeditems '表不显示在IE 9中,但如果在Firefox 30上使用,它应该显示。在IE中,它发送post数据,当我用开发人员工具检查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将在空的<table>
中创建一个空的<tbody>
,并将其用作表占位符,您将<tr>
和<td>
标签直接注入<table>
相关文章:
- spine.js在启动时填充模型实例
- Fabric.js-更改矩形填充
- 在EXT窗体面板中填充EXT JS存储
- 使用kendo js填充网格
- 如何在js中实现树结构类型的表单动态填充
- 如何在d3.js中填充svg圆圈内的图像
- 在Angular JS中,预先填充ng中的下拉值repeat
- 在Sails.js中通过关系填充多对多
- 在Angular JS中填充对象以进行插入
- 在 Node.js 中填充来自猫鼬的对象
- JS使用不同的填充
- 意思是.JS中间件中的猫鼬填充不起作用
- 设置图像以使用纸张.js填充画布
- 面积图的条件填充 D3.js
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 在刀片模板中填充js数组
- 用PHP填充JS代码段
- PHP:使用opendir填充JS幻灯片
- 在特定索引中填充JS数组
- 如何在我的谷歌浏览器扩展程序中将信息从后台传递.js到自动填充.js