Question

I have a simple table and I wish to add rows dynamically to them when some conditions apply.

<table>
<thead>
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input class='new' name='test1' value='' /></td>
        <td><input name='test2' value='' /></td>            
    </tr>
</tbody>
</table>

JS:

$('table').on('keydown', '.new', function () {
if ($(this).val() === '') {
    var newBench = $("<tr><td><input class='new' name='aname' value='' /></td><td><input name='aname' value='' /></td></tr>");
    newBench.hide().appendTo('#dialog table').show('slow');

}
});

If you type something in the first input another row is appendend to the table but, when doing so, the td element containing the input where the text was inserted become bigger.
It only happens for the first row and works under IE9.
If I remove the hide() and the show() part, it works as expected.

Here is an example of the code which is not working: JSFIDDLE

Answer 1

FADE IN WORKING IN IE

Here you go bro…

Fiddle

$('table').on('keydown', '.new', function () {
    if ($(this).val() === '') {
        var newBench = $("<tr><td><input class='new' name='aname' value='' /></td><td><input name='aname' value='' /></td></tr>");

        $(this).closest('tr').after(newBench.hide(function(){$('input', this).fadeIn('slow');}));

    }
});