0

長い 1 日を過ごした後、私の脳は焼き尽くされており、今週末、jquery を使用して UI にテーブルを挿入するタスクを与えられました。

HTML要素を挿入している大きな醜いコード行がいくつかあります...これをきれいにする簡単な方法があるかどうかを確認したかったのです。複数の行に分割できることはわかっていますが、ベスト プラクティスが必要です。



    $('#submitNewTiers').bind('click',function (e) {

    $('<div class="tiersTables"><span><a href="" rel="#overlay">Edit Tiers </a></span><table class="visible" id="newTiersTable"><thead&gr;<tr><th>Range</th><th>List Price</th><th>Quote Price</th><th class="lastTh">Approval?</th></tr></thead></table></div>').insertAfter('div.tiersTables');
    $('<tbody><tr><td>HERE</td><td></td><td></td><td></td></tr></tbody>').insertAfter('#newTiersTable thead');
        return false;
    });
4

2 に答える 2

1

HTML ドキュメント内に HTML コードを配置します。

<div class="tiersTables">
    <span>
        <a href="" rel="#overlay">Edit Tiers </a>
    </span>
    <table class="visible" id="newTiersTable">
        <thead>
            <tr>
                <th>Range</th>
                <th>List Price</th>
                <th>Quote Price</th>
                <th class="lastTh">Approval?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HERE</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

CSS で非表示にします。

div.tiersTables { display:none; }

次に、クリックすると表示されます。

$('#submitNewTiers')click(function() {
    $('.tiersTables').show();
});
于 2011-06-25T00:05:59.050 に答える
1

実際には、テーブル全体を文字列として変数に入れ、1insertAfter();を使用してそれを DOM に入れることができます。

append()これらの呼び出し ( 、prepend()、insertAfter()など) はパフォーマンスの点で安価ではないため、使用するのはできるだけ少なくするのが賢明だと思います。

于 2011-06-24T23:41:38.100 に答える