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/

这适用于我在IE9中运行IE8兼容性，但不能运行IE7兼容性。如果IE7很重要，请完全删除tbody部分，然后添加到$('#transTable')。

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

Answer 2

我有个坏消息，Internet Explorer 8及更低版本不支持在<table>中插入新内容。我几年前在一个项目上发现了这个问题。我认为IE9解决了这个问题。

为了解决这个问题，我将整个<table>放入另一个<div>，然后我将创建一个包含新行的新表。我在三个单独的变量中保存了表头，行和页脚的html，只是向行添加内容，然后用<div>填充header + rows + footer。

IE中的动态表

2 个答案: