0

我有一个简单的表，我希望在某些条件适用时动态地向它们添加行。

<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');

}
});

如果您在第一个输入中键入内容，则另一行将附加到表中，但是这样做时，包含插入文本的输入的 td 元素会变大。它只发生在第一行并且在 IE9 下工作。如果我删除 hide() 和 show() 部分，它会按预期工作。

这是一个不起作用的代码示例：JSFIDDLE

4

2 回答 2

1

这在某种程度上与不确定如何修复display:block设置的相关。.show()我已经更新了代码并让它在 FF 中工作：

$('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').css('display', 'table-row');
    }
});

演示：http: //jsfiddle.net/E99pf/6/

不知道如何慢慢显示。下面的代码肯定不起作用：

newBench.hide().appendTo('#dialog table').show('slow', function(){$(this).css('display', 'table-row')});

演示：http: //jsfiddle.net/E99pf/5/

于 2012-11-06T14:16:25.487 回答
1

FADE IN 工作在 IE

给你哥...

小提琴

$('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');}));

    }
});
于 2012-11-06T14:37:32.997 回答