CODEWITHSUNDEEP
javascriptjqueryhtml-table
MeetM
MeetM

Reputation: 1430

Dynamic table in IE

I have written this code where I want to increase / decrease number of rows of some selected fields dynamically based on the input in some other field. This code works fine in Chrome and Firefox but doesn't work in IE9. Please help.

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/

Upvotes: 2

Views: 2211

Answers (2)

Blazemonger
Blazemonger

Reputation: 92893

Replace $('#transTable > tbody') with $('#transTable tbody') and it should work.

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

This works for me in IE9 running IE8 compatability, but not running IE7 compatability. If IE7 is important, remove the tbody part entirely and just append to $('#transTable').

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

Upvotes: 3

pseudosavant
pseudosavant

Reputation: 7234

I have bad news, Internet Explorer 8 and lower don't support inserting new content into a <table>. I found this out the hard way on a project I did a couple of years ago. I think IE9 fixed this issue.

To get around it I put the whole <table> into another <div> and then I would create a new table with the new rows in it. I held the html for the table header, rows, and footer in three separate variables and would just add content to the rows then populate the <div> with header + rows + footer.

Upvotes: -2

Related Questions