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

私は<table>に新しいコンテンツを挿入するサポートしていない、悪いニュースは、Internet Explorer 8と下を持っています。私は数年前にやったプロジェクトでこれを難しい方法で見つけました。私はIE9がこの問題を修正したと思う。

これを回避するには、<table>を別の<div>に入れて、新しいテーブルを新しいテーブルで作成します。私は3つの別々の変数でテーブルのヘッダー、行、およびフッターのhtmlを保持し、行に内容を追加してにheader + rows + footerを入力します。