的jQuery的insertBefore

Question

我有以下幾點：

<table id="StateNames"> 
<tr> 
<td><input name="StateName"></td> 
</tr> 
<tr><td>Wyoming</td></tr> 
<tr><td>Wisconsin</td></tr> 
<tr><td>West Virginia</td></tr> 
</table> 

我想

$('input').change(function() { 
    var StateName = $(this).val(); 
    insert <tr><td>StateName</td></tr> before Wyoming 

Answer 1

我假設你想要的行之後添加行，所述輸入元素是：

$('input').change(function() { 
    var StateName = $(this).val(); 
    $(this).closest('tr').after('<tr><td>'+StateName+'</td></tr>'); 
}); 

如果您明確需要將其插入懷俄明行之前，則最好以某種方式識別該行–的ID標籤將是適當的：

<tr id="wyoming"><td>Wyoming</td></tr> 
<tr id="wisconsin"><td>Wisconsin</td></tr> 
<tr id="west-wirginia"><td>West Virginia</td></tr> 

 

$('input').change(function() { 
    var StateName = $(this).val(); 
    // Insert before Wyoming: 
    $('#wyoming').before('<tr><td>'+StateName+'</td></tr>'); 
}); 

您還可以使用:contains()僞類，如果你不希望把你的行（這將是更快的那樣）：

$("tr:contains('Wyoming')").before('<tr><td>'+StateName+'</td></tr>'); 

Answer 2

像這樣：

var newElem = $('<tr></tr>').append($('<td></td>').text(StateName)); 
$(this).closest('tr').after(newElem); 

或者：

$('tr:contains(Wyoming)').before(newElem);