Question

我有一个使用JQuery UI标签小部件的页面。其中2个标签共享同一条HTML，这只不过是一个简单的HTML表格：

<table border="0" cellpadding="0" cellspacing="0" class="showTable" id="table-person-info">
    <tr>
        <td class="pictureColumn">
            <img alt="Person Photo" src="images/avatar.jpg" id="CurrPersonPhoto" />
        </td>                   
        <td>
            <div id="CurrPersonFullName" class="fullName"></div>
            <b class="popupInfo">Person ID:&nbsp;</b><div id="CurrPersonID" class="popupInfo"></div><br />
            <b class="popupInfo">Hire Date:&nbsp;</b><div id="CurrHireDate" class="popupInfo"></div><br />
            <b class="popupInfo">Tenure:&nbsp;</b><div id="CurrTenure" class="popupInfo"></div><br />
            <b class="popupInfo">Location:&nbsp;</b><div id="CurrLocation" class="popupInfo"></div>
        </td>
        <td style="width:179px;">
            <img src="edit.png" alt="Edit" />
            <img src="log_activity.png" alt="Log activity" />
        </td>
    </tr>
</table>

在ajax调用之后表被更新，并且为了避免重复相同的代码两次，我尝试使用JQuery clone（）函数将其注入到我需要的选项卡上的2个点展示下。我用了这个电话：

$("#table-person-info").clone(false).find("*").removeAttr("id").appendTo($("#person-Info-View"));

将clone方法的参数从true更改为false似乎没有任何区别。我发现这段代码完全破坏了html代码：

    <table border="0" cellpadding="0" cellspacing="0" class="showTable">    </table>
    <tr>
        <td class="pictureColumn">
        </td>                   
        <td>
        </td>
        <td style="width:179px;">
            <img src="edit.png" alt="Edit" />
            <img src="log_activity.png" alt="Log activity" />
        </td>
    </tr>
<img alt="Person Photo" src="images/avatar.jpg" />
<div id="CurrPersonFullName" class="fullName"></div>
<b class="popupInfo">Person ID:&nbsp;</b><div class="popupInfo"></div><br />
<b class="popupInfo">Hire Date:&nbsp;</b><div class="popupInfo"></div><br />
<b class="popupInfo">Tenure:&nbsp;</b><div class="popupInfo"></div><br />
<b class="popupInfo">Location:&nbsp;</b><div class="popupInfo"></div>

对JQuery文档的快速回顾表明，这实际上是预期的，我引用：

使用.clone（）克隆未附加到DOM的元素集合时，无法保证在插入DOM时的顺序

那就是这种情况，我有什么样的选择？我是否同意复制表格，并且每次选择选项卡时都只手动更新值？我的意思是，只是两次，我想这并不困难，但我想知道是否有一个更优雅的替代方案，或者我是不是采用正确的方法来重复使用JQuery的HTML代码。

对于这篇长篇文章感到抱歉，并在收到任何建议之前表示感谢！

Answer 1

执行此代码时：

$("#table-person-info").clone(false)
    .find("*").removeAttr("id")
    .appendTo($("#person-Info-View"));

您已使用find进入新选择，因此您将附加已删除ID的所有元素，而不是原始父表。试试这个：

$("#table-person-info").clone(false)
    .find("*").removeAttr("id").end()
    .appendTo($("#person-Info-View"));

Answer 2

我知道这可能需要更长的时间来编写，不知道你是否使用自己的对象，但是你有没有想过为你的场景使用jQuery模板？您可以非常轻松地将模板绑定到对象，只需更新后端中的对象，这将自动更新您的表，并且每次更新时克隆整个表所需的处理要少得多。

JQuery Clone（）破坏了我的html。可以多次复制相同代码的替代方案？

2 个答案: