javascript - 如何使用 Jquery 动态克隆一个选项卡

Question

您好，我正在开发一个 Web 应用程序，但遇到了克隆问题。基本上只要用户选中一个复选框，就会出现一个选项卡。然后，用户可以通过下拉框、搜索框和添加按钮将详细信息添加到此选项卡上的表格中。

当用户选择不同的复选框时，一个带有空白表格的新选项卡会出现在前一个选项卡的旁边。我希望用户能够选择从之前选择的选项卡复制或从空白开始。

从空白开始似乎很简单我添加了一个显示在选项卡中的链接，一旦单击该链接就会简单地隐藏并且选项卡会用空白表格提醒。

$(document).ready(function(){
    $("#tabs").tabs();

    $(".selectedCodeCheckbox").change(function(){
        if ($(this).is(':checked')) {

            // show tab         
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'block');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'block');
            $("#tabs").tabs( "select" , $("#tabs").find(".tabpanel-"+$(this).val()).attr('id'));
            $(".step2").css('display', 'block');
        } else {
            // remove tab
            $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'none');
            $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'none');
        }
    });

选中复选框后显示选项卡。

<div style="width: 600px; float: left; margin-left: 30px; margin-top: 10px;">
                    <table id="clubListTable_${instanceEntry.key}" class="reports" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Unit Type</th>
                                <th>Unit Name</th>
                                <th><spring:message code="generic.male" text="Male" /></th>
                                <th><spring:message code="generic.female" text="Female" /></th>
                                <th>
                                    <spring:message code="generic.remove" text="Remove" />
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="emptyRow">
                                <td colspan="5">No Units Added</td>
                            </tr>
                        </tbody>
                        </table>

                </div>

这是我希望克隆的选项卡中的表格。 每个选项卡都是从相同的动态创建的 <div id="tabs" .

选项卡的放置顺序是按字母顺序排列的。因为只有 6 个复选框，所以只能有 1-6 个选项卡。

另外，如果可能的话，有人还可以解释一下，如果它是第一个选中的复选框，我将如何不给用户任何选项。也只是在一方面，用户不能选择多个复选框来生成多个选项卡。

Answer 1

这里我制作了 sample :http://jsbin.com/welcome/50444/ 也许一个例子会帮助你

<div id="tabs" style="height:300px;">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li id="tab3"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">content 1</div>
    <div id="tabs-2">content 2</div>
    <div id="tabs-3">content 3</div>
</div>


<script>
  $(function() {
      $("#tabs").tabs();   
  }); 

  function cloneLast(){
    var lastDiv = $('#tabs div:last-child');
    var lastLi = $('#tabs').find('li').last().find('a');   
    $("#tabs").tabs('add','#newTab',lastLi.html());
    $('#newTab').html(lastDiv.html());
  }
</script>  
<a href="#" onclick="if($('#tab3').is(':visible')) $('#tab3').hide(); else $('#tab3').show();">toggle visibility</a>  

<a href="#" onclick="cloneLast()">clone last</a>