Обновление строки таблицы по заданному идентификатору с помощью jQuery

Question

Мне нужно обновить конкретную строку таблицы (через tr id = "unique_key") после успешного вызова AJAX.

Фрагмент 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

<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 в переменной с именем updateID (сделайте ее глобальной переменной), а затем в случае успеха ajax используйте селектор jQuery $ ('tr # 2 td'), чтобы вернуть массив элементов td внутри tr # 2. Поэтому для Tracking # td по индексу 1 присваивается переменная tracking112. Точно так же, тд с индексом 2 присваивается начислению 112.

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

Публикуемые в форме значения, назначенные элементам таблицы tr td. Это обновит строку со значениями, которые были опубликованы в форме.

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

Answer 4

Просто это идея, попробуйте это

Ваш tr должен быть один или много, конкрементный идентификатор продукта tr с константой и значением приращения, например

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

Если вы собираетесь удалить, значит просто передайте позицию tr с идентификатором продукта и получите правильное значение для удаления и отобразите tr в заказе.

Answer 5

Нет ничего плохого в идее.

Попробуйте просто заменить содержимое каждого TD внутри этого TR вместо удаления и добавления нового.