Динамическая таблица в IE - PullRequest
Новая
       9

Динамическая таблица в IE

2 голосов
/ 17 января 2012

Я написал этот код, в котором я хочу динамически увеличивать / уменьшать количество строк в некоторых выбранных полях на основе ввода в каком-либо другом поле.Этот код отлично работает в 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/

Ответы [ 2 ]

4 голосов
/ 17 января 2012

Замените $('#transTable > tbody') на $('#transTable tbody'), и оно должно работать.

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

Это работает для меня в IE9 с совместимостью с IE8, но без совместимости с IE7.Если важен IE7, полностью удалите часть tbody и просто добавьте к $('#transTable').

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

0 голосов
/ 17 января 2012

У меня плохие новости, Internet Explorer 8 и ниже не поддерживает вставку нового контента в <table>. Я нашел это на своем пути в проекте, который я сделал пару лет назад. Я думаю, что IE9 исправил эту проблему.

Чтобы обойти это, я помещаю целое <table> в другое <div>, а затем создаю новую таблицу с новыми строками в ней. Я держал HTML для заголовка таблицы, строк и нижнего колонтитула в трех отдельных переменных и просто добавлял содержимое в строки, а затем заполнял <div> с header + rows + footer.

...