jQuery - 動態表在IE中不起作用

Question

我已經寫了這段代碼，我想根據其他字段中的輸入動態增加/減少某些選定字段的行數。此代碼在Chorme和Firefox中正常工作，但在IE9中不起作用。請幫忙。感謝您的時間。

HTML

<style type="text/css"> 
table { empty-cells: hide; } 
</style> 
<table border="3px" id="transTable"> 
<form method="post" > 
<tbody> 
<tr> 
<th>Boxes</th><th>Some Field</th> 
</tr> 
<tr > 
<td> 
<input type="text" name="boxes" size="4" id="boxes"/> 
</td> 
<td> 
<input type="text" name="somefield" size="5"/> 
</td> 
</tr> 
</tbody> 
</table> 

JS

var i=2; 
$("#boxes").change(function(){ 
var noofbox = $("#boxes").val(); 
previ=i; 
prevn=noofbox; 
while(prevn<previ) 
{ 
    prevn++; 
    $('#'+prevn).remove(); 
} 

for(;i<=noofbox;i++) 
{ 
    var htmlcon='<tr id="'+i+'"><td></td><td><input type="text" name="somefield'+i+'" size="5"/></td></tr>'; 
    $('#transTable > tbody:last').append(htmlcon); 
} 
i=noofbox; 
i++; 
}); 

的jsfiddle：http://jsfiddle.net/YSPy5/

Answer 1

將$('#transTable > tbody')替換爲$('#transTable tbody')它應該工作。

http://jsfiddle.net/Ssgqh/4/

這在IE9運行IE8的兼容性，但不運行IE7的兼容性爲我工作。如果IE7很重要，請完全刪除tbody部分，然後將其附加到$('#transTable')。

http://jsfiddle.net/Ssgqh/5/

Answer 2

我有一個壞消息，Internet Explorer 8和更低的不支持插入新的內容爲<table>。我在幾年前做過的一個項目中發現了這一點。我認爲IE9解決了這個問題。

爲了解決這個問題，我把整個<table>放到另一個<div>中，然後我創建一個新表格，其中有新的行。我在三個單獨的變量中保存了表頭，行和頁腳的html，並將內容添加到行中，然後用header + rows + footer填充<div>。