Question

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

<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

Answer 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/

Answer 2

在IE中工作

在这里，你去了......

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

    }
});

在Firefox上奇怪的jquery显示行为

2 个答案: