使用.after添加一個</tr><tr>不起作用

Question

我有一個table，目前每行有兩列，我需要使用jQuery來分割它。

我嘗試這樣做：

$(document).ready(function() { 
    $('.TextBold').after('</tr><tr>'); 
}); 

...但它不工作。我想知道是否可以在那裏添加<p>Test</p>而不是</tr><tr>？

在這裏你可以看到我在的jsfiddle代碼.. http://jsfiddle.net/QjJhU/

，我將不勝感激，如果有人可以解釋這個問題。

Answer 1

問題是，你想象的是，jQuery（和一般的Javascript）編輯HTML文檔。它沒有。瀏覽器讀取HTML，然後從中創建一個DOM結構。此時，HTML內容完全不相關。瀏覽器唯一關心的是DOM結構。

這意味着您不能添加元素的位：您只能將整個元素（或文本節點）添加到文檔。您正試圖關閉一個標籤（使用</tr>），然後打開另一個標籤（使用<tr>）。實際上，瀏覽器讀取</tr><tr>並使DocumentFragment不在其中。由於結束標記本身無效，因此將其刪除。然後<tr>本身就變成了一個完整的元素：<tr></tr>。這是有效的HTML，因此它被轉換爲有效的DOM元素並被插入。

您需要制定一種方法，從一個tr中刪除td，創建一個新的tr並將td添加到它。

像這樣的東西應該工作：

$('.TextBold').each(function() { 
    $('<tr/>').insertAfter(this.parentNode).append($(this).next()); 
}); 

這是說：

• 每個TextBold元素，請執行下列操作：
  • 創建一個新的tr元素
  • 後插入TextBold的父元素（這是tr ）
  • 附加隨後的TextBold到新tr元素（這也具有從其當前位置中取出的效果）

Here's a jsFiddle with this working code。

Answer 2

嘗試，而不是：

$('.TextBold').each(
    function(){ 
     $('<tr />').insertAfter($(this).parent()).append($(this).next('td')); 
    }); 

JS Fiddle demo。

您的方法不起作用的原因是因爲JavaScript，因此jQuery創建DOM節點，而不是像這樣標記。因此，您不能添加結束標記</tr>和開始標記<tr>，只有一個DOM節點包含整個節點。

至於你的問題：

我不知道我可以能夠添加的<p>Test</p>，而不是</tr><tr>那裏。

我真的不能解決你的意思;但table，並外td或th的內，一個p將會使加價無效，因爲p不是tbody，tfoot，thead，tr或table有效孩子。

---

編輯更新發布的jQuery，與closest()更換parent()：

$('.TextBold').each(
    function(){ 
     $('<tr />').insertAfter($(this).closest('tr')).append($(this).next('td')); 
    }); 

JS Fiddle demo。

參考文獻：

• append()。
• closest()。
• each()。
• insertAfter()。
• next()。
• parent()。