Jquery insertAfter html элемент рефакторинга - PullRequest
Новая
       31

Jquery insertAfter html элемент рефакторинга

0 голосов
/ 25 июня 2011

Мой мозг зажегся после долгого дня, и на этих выходных ему было поручено вставить таблицу в наш пользовательский интерфейс с помощью jquery.

У меня есть несколько больших уродливых строк кода, которые вставляют 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;
    });

Ответы [ 2 ]

1 голос
/ 25 июня 2011

Поместите 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();
});
1 голос
/ 25 июня 2011

На самом деле, вы можете просто поместить всю таблицу как строку в переменную и использовать 1 insertAfter();, чтобы поместить ее в DOM.

Я думаю, что разумно использовать как можно меньше таких вызовов (append(), prepend(), insertAfter() и т. Д.), Поскольку они недешевы по производительности.

...