使用jQuery按给定id更新表行

Question

在成功进行AJAX调用后,我需要更新特定的表行(通过tr id ="unique_key").

HTML片段:

<a name=\"p{$product_id}\" class=\"tr{$product_id}\"></a>
<tr id="p{product_id}" class="item-row">
<td><h3>{product_id}</h3><a rel="facebox" href="ajax_url">{product_name}</a></td>
<td>{image_information}</td>
<td>{image_sortiment}</td>
<td>{product_status}</td>
</tr>

使用Javascript:

// AJAX Call
success: function(msg){
    $('#p' + prod_id).remove();
    $('.tr' + prod_id).after(msg);
    $('#p' + prod_id + ' a[rel*=facebox]').facebox();
}
...

怎么了:

• 表格行已删除
• 锚点组成一行(不在它们之前<tr>),所以我的'钩子'消失了
• AJAX结果插入整个表格(在我的'钩'之后但仍然是错误的地方)

我的想法有什么问题？我如何强制jQuery'覆盖'所需的表行？

Answer 1

您不能在表格内部但在表格行之外拥有锚点.表中的所有内容都必须位于表格单元格内.如果您将内容放在单元格之外,浏览器会尝试修复代码,以便可以显示它,通常是将其移动到表格之后.

操作表中的内容可能很棘手,如果您将行添加为html块而不是行元素,它可以起作用.使用jQuery函数从您获得的字符串创建元素.

var row = $(msg);
$('#p' + prod_id).replaceWith(row);