Jquery insertAfter html元素重構

我的大腦在漫長的一天後被炸，本週末在我們的UI中使用jquery插入表的任務給了我一個任務。Jquery insertAfter html元素重構

我已經有一些插入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; 
    });

來源

2011-06-24 Robert

其實，你可以只是把整個表作爲一個字符串轉換爲變量，使用1 insertAfter();付諸DOM。

我認爲使用盡可能少的這些電話是明智的（append(),prepend(),insertAfter()等），因爲它們並不便宜性能。

來源

2011-06-24 23:41:38

我很欣賞你的小費因爲稍後我必須在動態增加動態值，這將需要進一步調用。但是，如果有附加值，我總是可以使用$ .each。 – Robert

@Robert考慮[模板]（http://api.jquery.com/category/plugins/templates/） –

將您的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-25 00:05:59

我喜歡這個答案，如果我只是添加一個表，但我需要能夠增加表的數量我顯示。所以使用你的建議，我將不得不創建多個html表並隱藏它們，然後單擊顯示最近的表。 – Robert

@Robert我的建議是這樣的：從一開始就有一個隱藏表（硬編碼到您的HTML源代碼中）。然後，每當你需要一個新表時，克隆它並將該克隆追加到DOM（在所需位置）。爲此，jQuery有一個方便的['clone（）'方法]（http://api.jquery.com/clone/）。 –

Jquery insertAfter html元素重構

回答

相關問題