1

我有一个使用 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 代码。

很抱歉发了这么长的帖子，并在此之前感谢您提出任何建议！

4

2 回答 2

5

当您执行此代码时：

$("#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"));
于 2013-02-19T14:54:28.610 回答
-1

我知道这可能需要更长的时间来编写，不知道您是否使用自己的对象，但是您是否考虑过在您的场景中使用 jQuery 模板？您可以很容易地将模板绑定到一个对象，然后在后端更新该对象，这将自动更新您的表，并且比每次更新时克隆整个表所需的处理要少得多。

于 2013-02-19T14:56:12.443 回答