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

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

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

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

Answer 3

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

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

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

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

Answer 4

У вас не может быть никаких элементов без стола непосредственно внутри <table>, но не внутри <td> или <th>. Браузеры не будут отображаться правильно.

Таким образом, вы должны поставить якорь в другой <tr><td> .. </td></tr>

Но если они есть только удалить строку и создать новую, вы можете попробовать replaceWith() вместо:

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

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> 

магазин КОНЦЕРН id в переменной с именем updateID (сделать ее глобальной переменной), а затем в успехе ajax использовать селектор jQuery $ ('tr # 2 td'), чтобы вернуть массив элементов td внутри tr # 2. Таким образом, для отслеживания # td в индексе 1 присваивается переменная tracking112. Аналогично td при индексе 2 присваивается значение charge12.

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

Форма размещены значения, присвоенные TD elements.This таблицы т.р. обновит строку со значениями, которые были опубликованы в форме.

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