javascript - 追加数据加载问题

Question

我的html是这样的

<div id="rsContainer">
        <table id="rsTable"><!-- DATA HERE --></table>
</div>

我的 JavaScript 是这样的

$('#UpdateAll').click(function() {

        $('#status').fadeIn('500').text('Loading... This may take a while.');
        $.ajax({
        type: 'post',
        url: 'func.php',
        data: 'action=updateAll',

        success: function(response) {
            $('#response').fadeOut('500').fadeIn('500').append(response);

            $('#rsTable').slideUp('1000').load('index.php #rsTable', function() {
                $(this).appendTo('#rsContainer').slideDown('1000');
            });

            $('#status').fadeOut('500').empty();
        }
        });     
    });

这工作正常，但附加 html 后看起来像这样

<div id="rsContainer">
        <table id="rsTable">
            <table id="rsTable"><!--data--></table>
        </table>
</div>

如您所见，它实际上将其附加到 rsTable 我如何保持原始结构？

谢谢。

Answer 1

在我运行的测试中，在 .prepend() 之前执行 .emtpy() 在 200 次迭代中比执行 .html() 快约 20%。奇怪但真实。

如果您的目的是在其中包含两个 rsTable，则应该为 id 添加一个计数器或使用一个类，因为 ids 必须是唯一的。

看起来您想这样做:

$('#rsContainer').empty();
$('#rsContainer').prepend($('#rsTable'));