jQuery的後其他<tr>元件

添加在元件正在嘗試在後根據<td>元件的該特定<tr>元件內的rowspan的表中的其他元素<tr><tr>元素添加。在相同的功能中，單擊<td>元素內的此按鈕時，行距每次增加1，因此它還需要增加行數。不知道如何做到這一點。以某種方式使用slice()函數。jQuery的後其他<tr>元件

例如，假設我們有這個表結構。

<table> 
    <tr> 
    <td>Content 1</td> 
    <td>Content 2</td> 
    <td>Content 3</td> 
    </tr> 
    <tr> 
    <td rowspan="2">Content 4</td> 
    <td colspan="2">Content 5</td> 
    </tr> 
    <tr> 
    <td>Content 6</td> 
    <td>Content 7</td> 
    </tr> 
</table>

所以我希望能夠在<td rowspan="2">Content 4</td>元素中點擊一個按鈕，創建另一個<tr>，但由於行跨度已經等於2，我需要另一個<tr>元素出現在表的末尾，使它需要將當前父<tr>中的元素計爲<table>元素的子元素列表中的<tr>元素以及其後的<tr>元素應計爲2，因此需要在元素中添加<tr>元素，最終導致存在2個行堆棧在<td rowspan="2">Content 4</td>。

所以基本上，我需要捕獲所有的孩子<tr>元素開始與父<tr>元素和<table>內增加下來<tr>元素列表，並與rowspan指望他們，如果rowspan=1或行跨度不存在，比它應該創建直接在另一<tr>元素<td>元素的父元素<tr>後...

$(this).parent().after('<tr></tr>');

但我想，我不能使用after()這裏，而應該以某種方式使用slice()，CA如果rowspan等於2，則使用它，而不是它需要跳過2 <tr>元素，包括父元素<tr>，然後在其後面添加它。它需要完全基於單擊的<td>元素的行距，以便新的元素將始終按照正確的順序放置。

我實際使用來完成after()部分的代碼中，需要根據該行跨度而不是要改變的一個例子是如下：

for (var i = 0, len = maxAddSections; i < len; i++) 
{ 
    tdHtml += '<td class="dp_add_section" colspan="1" style="display: table-cell;"><div style="opacity: 0.6;"><span class="upperframe"><span></span></span><div class="roundframe blockframe" style="text-align: center;">ADD SECTION</div><span class="lowerframe"><span></span></span></div></td>'; 
} 
pTd.parent().after('<tr class="dp_add_tr_section">' + tdHtml + '</tr>');

pTd是實際<td>對象，它是被點擊，在<td>元素內。所以，我可以抓住rowspan如下： pTd.attr('rowspan'); 但我怎麼能把它放在需要去的地方？喜歡有nextAll和計算它基於rowspan，但只添加在<tr>元素1次？

順便說一下，我正在使用maxAddSections，告訴我要添加多少個<td>元素。

我需要改變pTd.parent().after(... code ...);到它從pTd.parent()的rowspans其是<tr>元件，需要計數rowspans的數量和跳過許多<tr>元件，包括一個，它是在後添加。這就是它需要添加新的<tr>元素的地方：'<tr class="dp_add_tr_section">' + tdHtml + '</tr>'

所以，希望這有助於澄清我試圖做得更好。

我該怎麼做？

來源

2012-02-29 SoLoGHoST

規則的描述令人困惑......談論父母tr和孩子tr，但沒有嵌套tr。「之後」標記的例子將有助於 – charlietfl 2012-02-29 02:56:30

假設我正在讀這篇文章是否安全：「如何將行添加到表中，考慮到任何行/ colspans？」 – 2012-02-29 02:58:22

@ charlietfl，在更多的代碼中添加，以幫助您瞭解我目前如何使用'after（）'jQuery函數，該函數需要更改。所以希望你現在有更好的理解。 @Brad，我已經考慮到了，這些羣體，只需要考慮rowspans，但是，這基本上是一種更好的方式。 – SoLoGHoST 2012-02-29 03:07:22

我在td裏添加了button元素，併爲它們綁定了一個click事件。

<button class="btn">Add</button>

的事件觸發的td元素中的按鈕，將尋父td元素和檢索rowspan屬性。然後它會得到父元素tr元素並移動到繼兄弟tr元素，並將在其後添加tr。

$(".btn").click(function(){ 
    var 
     $this = $(this), 
     $td = $this.parent(), 
     rowspan = $td.attr("rowspan") || 1, 
     $tr = $td.parent(); 

    for(var i=1; i<rowspan; ++i) 
     $tr = $tr.next(); 
    $tr.after('<tr><td colspan="3">&nbsp;</td></tr>'); 
});

這是a working example。

來源

2012-02-29 03:17:21 Alexander

謝謝，這個工作完美無瑕，只需切換它，以便在執行此代碼之後在''元素上增加行跨度。乾杯:) – SoLoGHoST 2012-02-29 03:43:51

jQuery的後其他<tr>元件

回答

相關問題