Aggiornamento riga tabella con ID specificato con jQuery

Question

Ho bisogno di aggiornare una riga di tabella specifica (tramite tr id = "unique_key") dopo una chiamata AJAX riuscita.

frammento

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(); 
} 
... 

Cosa accade:

• La riga della tabella rimosso
• ancore raggruppati in un'unica fila (non prima del loro <tr> è così che il mio "gancio" scompare
• risultato AJAX inserito su tutto il tavolo (dopo la mia 'gancio', ma ancora un posto sbagliato)

Cosa c'è di sbagliato con la mia idea? Come posso forzare jQuery a 'sovrascrivere' la riga della tabella richiesta?

Answer 1

Non è possibile avere ancore all'interno della tabella ma all'esterno delle righe della tabella. Tutto il contenuto di una tabella deve trovarsi all'interno delle celle della tabella. Se metti il ​​contenuto fuori dalle celle, i browser tentano di correggere il codice in modo che sia possibile visualizzarlo, di solito spostandolo dopo la tabella.

La manipolazione del contenuto in una tabella può essere complicata, può agire se si aggiungono righe come blocchi di HTML anziché elementi di riga. Usa la funzione jQuery per creare elementi dalla stringa che ottieni.

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

Answer 2

Nulla sembra sbagliato nell'idea.

Provare a sostituire il contenuto di ogni all'interno di quello TR invece di rimuoverlo e aggiungerne uno nuovo.

Answer 3

Basta è un'idea, tryout questo

tuo tr deve essere singolo o molti, concate prodotto tr id con costante e con valore di incremento, come questo

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

Se avete intenzione di eliminare significa solo passare la posizione tr con id prodotto e ottenere il valore corretto da rimuovere e visualizzare il tr nell'ordine.

Answer 4

Non è possibile avere elementi non di tabella direttamente all'interno di <table> ma non all'interno di <td> o <th>. I browser non lo renderanno correttamente.

quindi bisogna inserire ancore in un altro <tr><td> .. </td></tr>

Ma se sono lì solo per rimuovere riga e creare uno nuovo, si può provare replaceWith() invece:

$('#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> 

negozio tr id in una variabile chiamata updateID (renderla una variabile globale) e quindi nel successo dell'ajax usa il selettore jQuery $ ('tr # 2 td') per restituire una matrice di elementi td all'interno di tr # 2. Quindi per il Tracking # td all'indice 1 viene assegnata la variabile tracking112. Allo stesso modo td all'indice 2 è assegnato a charge112.

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

Forma valori assegnati ai elements.This td tabella tr sarebbe aggiornare la riga con i valori che sono stati inviati dal modulo inviato.

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