2
我有一個'addItems'表不能顯示在IE 9中的問題，但如果在Firefox 30上使用顯示它應該。在IE中，它發送發佈數據，當我使用開發人員工具檢查HTML時，它會在頁面上顯示html元素。我試圖看看是否設置表格顯示來阻止，但沒有改變。IE 9沒有顯示由js填充的表
此代碼的目的是讓用戶從下拉列表中選擇要添加的設備類型，然後可以將任意數量的項目從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/
提供[JSFiddle]（http://jsfiddle.net/） – Linek
Wh在''？ IE對無效的HTML不好。你也可能想要更新jQuery，例如IE11將不適用於jQuery <1.11。 –
Teemu
你應該真的考慮一個客戶端模板引擎，所以你要擺脫這種手工編碼... –