0

经过漫长的一天后，我的大脑被煎炸了，本周末被分配了一项任务，即使用 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 回答