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

Answer 2

您不能在<table>内直接使用任何非表格元素，也不能在<td>或<th>内部。浏览器无法正确呈现它。

所以你必须将锚点放在另一个<tr><td> .. </td></tr>

中

但如果他们只是删除行并创建新行，则可以尝试使用replaceWith()：

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

Answer 3

这个想法似乎没有错。

尝试替换TD内的每个TR的内容，而不是删除和添加新内容。

Answer 4

这是一个想法，试试这个

你的tr必须是单个或多个，用常量和增量值来连接tr产品id，就像这样

 <tr id="p{product_id}cnt1" class="item-row">
 <tr id="p{product_id}cnt2" class="item-row">

如果您要删除，则意味着只传递带有产品ID的tr位置并获取正确的值以便删除并在订单中显示tr。

Answer 5

<table>
   <tr id="1234">
       <td>ID</td>
       <td>tracking</td>
       <td>charge</td>
  </tr>
</table>
 <form>
      <input id="modalTrackingNumber" type="text">
      <input id="modalCharge" type="text">
 </form>

将tr id存储在名为updateID的变量中（使其成为全局变量），然后在ajax成功时使用jQuery选择器$（'tr＃2 td'）返回tr内部的td元素数组2。因此对于Tracking＃td，将索引1分配给tracking112变量。类似地，索引2处的td被分配给charge112。

   var tracking112=$('tr#' + updateID + ' td' )[1];
   var charge112= $('tr#' + updateID + ' td' )[2];

表单分配给表tr td elements的已发布值。这将使用表单发布的值更新行。

     $( tracking112 ).html( $( '#modalTrackingNumber' ).val() );
     $( charge112 ).html( $( '#modalCharge' ).val() );

使用jQuery按给定id更新表行

5 个答案: