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 呼び出し後に更新され、同じコードを 2 回繰り返す必要がないように、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 に挿入されたときの順序は保証されません

では、私にはどのような代替手段がありますか？テーブルを複製し、タブが選択されるたびに値を手動で更新することを非難しますか? つまり、たった2回で、それほど難しいことではないと思いますが、もっとエレガントな代替手段があるのでしょうか、それとも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 に答える