jQuery：向表中添加行並在DOM中選擇它

我想向表中添加一行，然後將其用作DOM對象。假設下面的HTML：jQuery：向表中添加行並在DOM中選擇它

<table> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
    <tr class="existing-row"><td> 
     <a>add new row</a> 
    </td></tr> 
</table>

我用用jQuery以下JavaScript插入一行：

function addNewRow(addNewRowLink) 
    { 
    var currentRow = addNewRowLink.closest('tr'); 
    currentRow.after('<tr class="added-row"><td>This is new</td></tr>'); 

    var newRowInDomTree = currentRow.next('tr'); 
    //This does not work 
    }

變量newRowInDomTree包含tr.existing-row而不是tr.added-row。似乎DOM樹沒有更新，但我沒有理由爲什麼。

任何想法？

謝謝先進。

來源

2010-12-13 Daniel Peñalba

你在'after'語句後缺少一個分號。 – zzzzBov 2010-12-13 17:00:59

@ zzz，它更好有分號，但即使你不給它也不扔任何erros .. – kobe 2010-12-13 17:03:42

分號在JavaScript中是不必要的，但總是一個很好的做法來添加一個，所以有縮小代碼時沒有錯誤 – 2010-12-13 17:05:56

你的代碼應該工作，除非我看不到它是如何被調用的，所以我不知道addNewRowLink究竟是什麼。

另一種方法是在創建它時保留對新元素的引用。就像這樣：

function addNewRow(addNewRowLink) { 
    var currentRow = addNewRowLink.closest('tr'); 
    var newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>') 
           .insertAfter(currentRow); 
    // newRowInDomTree will be the element you created 
}

來源

2010-12-13 17:05:01 user113716

我認爲你正在尋找可以通過使用正確的功能被簡化的效果：

代替：

currentRow.after('<tr class="added-row"><td>This is new</td></tr>');

你應該嘗試：

newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>').insertAfter(currentRow);

我想冒險猜測你的選擇（currentRow.next('tr')）發生在元素之前實際上添加到了dom中。您可以嘗試收聽onload或onreadystatechange事件以查看它是否在稍後被觸發。

來源

2010-12-13 17:05:38 zzzzBov

你如何才能做到這一點？

$(".existing-row a").click(function() { 
newRow = $(this).parent.after('<tr class="added-row"><td>This is new</td><tr>'); 
});

來源

2010-12-13 17:08:16

給表格一個id。即

< table id="me"> 

var iHtml = ' < tr class="added-row">< td>This is new asdasdasd< /td>< /tr>' ; 

$('#me tr:last').after('iHtml ');

來源

2010-12-13 17:17:53 cmani

jQuery：向表中添加行並在DOM中選擇它

回答

相關問題