javascript - IE 中的动态表

Question

我编写了这段代码，我想根据其他字段中的输入动态地增加/减少某些选定字段的行数。此代码在 Chrome 和 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/

这对我在运行 IE8 兼容性但不运行 IE7 兼容性的 IE9 中有效。如果 IE7 很重要，请完全删除 tbody 部分并仅附加到 $('#transTable')。

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