Question

经过漫长的一天后，我的大脑被炸了，本周末我们的任务是使用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;
    });

Answer 1

实际上，您可以将整个表作为字符串放入变量中，并使用1 insertAfter();将其放入DOM中。

我认为尽可能少地使用这些来电（append()，prepend()，insertAfter()等）是明智之举，因为它们并非性价比低廉。

Answer 2

将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();
});

Jquery insertAfter html元素重构

2 个答案: