内容未显示在 jquery ui 选项卡中

Question

我制作了一个创建 jquery ui 选项卡的示例，我正在动态创建一个动态表并在 jquery ui 选项卡中渲染该表。但它只显示最后一个选项卡中的表格，而不显示前两个选项卡中的表格。下面是我的代码。

<script>
$(document).ready(function(){ 
    var $table = $('<div><table><th>Name</th><th>Age</th>Address<th></th></table></div>');

    var $myDiv = $('<div id="tabs">'+
                        '<ul>'+ 
                            '<li><a href="#tabs-1">Nunc tincidunt</a></li>'+
                            '<li><a href="#tabs-2">Proin dolor</a></li>'+
                            '<li><a href="#tabs-3">Aenean lacinia</a></li>'+
                        '</ul>'+
                            '<div id="tabs-1">'+
                            '</div>'+
                            '<div id="tabs-2">'+        
                            '</div>'+
                            '<div id="tabs-3">'+
                            '</div>'+
                '</div>');
                alert($myDiv);

    $myDiv.appendTo("body");

    $myDiv.tabs();
    $("#tabs-1").append($table);
    $("#tabs-2").append($table);
    $("#tabs-3").append($table);
}); 
</script>

我只是陷入这个困境，我也尝试过appendTo 方法，但同样的问题。

Answer 1

您可以尝试添加 append($table.clone())。当您将表的单个实例附加到下一部分时，它会将其从上一部分中删除。