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>');
});

如果您明确需要在包含Wyoming的行之前插入它，您最好以某种方式识别该行 - 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);