Jquery在特定父元素之后插入行

Question

我想使用jquery和ajax调用在我的html表中的两个其他现有行之间插入一个新行。特别是我需要在唯一一个包含＆＃34; a＆＃34; id值为＆＃34; 27＆＃34;的元素。

这是我的Html表：

<table class="table-list" cellspacing="0" cellpadding="0" border="0" width="90%">
<tbody>
<tr>
<th width="15%">Categoria</th>
<th width="15%">Servizio</th>
<th width="15%">Operazioni</th>
</tr>
<tr>
<td>categoria1</td>
<td></td>
<td>
<a id="27" class="del" href="#">Delete</a>
</td>
</tr>
<tr>
<td>categoria2</td>
<td></td>
<td>
<a id="29" class="del" href="#">Delete</a>
</td>
</tr>
</tr>
</tbody>
</table>

这是jquery代码的一部分，它不起作用：

$("<tr><td>"*+response.categoria+*"</td><td>"*+response.nome+*"</td><td><a href='#' id='"+*response.row_id*+"' class='del'>Delete</a></a></td></tr>").insertAfter($("a[id='27']")).closest("tr");   

（其中response.categoria =＆＃34; categoria1＆＃34;，response.nome = test，response.row_id = 28）

这是我的代码所得到的：

感谢您的帮助！

Answer 1

<强> jsBin demo

为了专注于你的主要问题，你的jQuery系列换句话说：

$("SOMEHTML").insertAfter(  $("a[id='27']")  ).closest("tr"); 

你可以看到插入它之后... jQuery的目标是.closest("tr")什么都不做 ，它会无声地失败。

应该像：.insertAfter( $("#27").closest("tr") );

请注意，由于ID必须是每页唯一的，因此不需要a[id=]，因此无需定义a锚元素并定位其属性属性（这也很慢。）

不确定您是否尝试突出显示代码标记示例，
 但你的JS应该是这样的：

<td>"+ response.categoria +"</td>

没有*

同样在你的JS中，你关闭</a></a>错误的两次

以下是固定代码：

var row = "<tr><td>"+response.categoria+"</td><td>"+response.nome+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></td></tr>";  
$("#27").closest("tr").after( row );

如果您更喜欢，请使用insertAfter

$("<tr><td>"+response.categoria+"</td><td>"+response.nome+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></td></tr>").insertAfter($("#27").closest("tr"));  

• 你有格式错误的HTML（额外的</tr>标签），这使我建议你使用更好的代码编辑器（这会为你突出显示错误）。

• 另请注意，使用cellspacing和cellpadding不会 W3C验证您的文档会导致冗余属性。请改用CSS

Answer 2

您的代码中存在一些错误：

• insertAfter()方法后包含错误的括号。
• 加倍</a>代码
• 最后一行中的无关</tr>标记。

另外，有一个建议：$('a[id="27"]')与$('#27')相比可能效率低下。由于ID是唯一的，因此无需将其与标记名称（a）绑定或使用任何属性选择器[id=""]。

我修复了你的代码，现在它似乎正在运行。请参阅演示小提琴：http://jsfiddle.net/teddyrised/0gLyrqso/

$("<tr><td>"+response.categoria+"</td><td>"+response.nome+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></td></tr>").insertAfter($("a[id='27']").closest("tr"));