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で機能します。hidden（）と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

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 に答える