Comment insérer un nouveau TR dans le MIDDLE d'un tableau HTML en utilisant JQuery?

Question

Je sais comment ajouter une nouvelle ligne à une table en utilisant JQuery:

var newRow = $("<tr>..."</tr>"); 
$("#mytable tbody").append(newRow); 

La question est de savoir comment puis-je créer une nouvelle ligne qui précède une ligne existante.

Answer 1

where_you_want_it.before(newRow) 

ou

newRow.insertBefore(where_you_want_it) 

- MarkusQ

Answer 2

Plutôt que ceci:

$("#mytable tbody").append(newRow); 

vous allez vouloir faire quelque chose comme ceci:

$("#id_of_existing_row").after(newRow); 

Answer 3

var newRow = $("<tr>...</tr>"); 
$("#idOfRowToInsertAfter").after(newRow); 

La clé est de savoir l'id de la ligne que vous souhaitez insérer la nouvelle ligne après, ou au moins à venir avec une syntaxe de sélection qui vous obtiendra cette ligne.

jQuery docs on after()

Answer 4

Avec:

var newTr = $('<tr>[...]</tr>'); 

Vous pouvez ...

1. Insérer après (ou avant si vous le souhaitez) une autre ligne que vous connaissez un ID (ou tout autre propriété):

   $('#<id of the tr you want to insert the new row after>').after(newTr) 
   

2. Insérer après un indice de ligne particulière (indices sont 0-base, et non base 1):

   $($('table#<id> tr')[<index>]).after(newTr) 
   

3. ... ou comme vous l'avez mentionné, le milieu absolu est possible:

   var existingTrs = $('table#<id> tr') 
   $(existingTrs[parseInt(existingTrs.length/2)]).after(newTr) 
   

Answer 5

Si, par exemple u placer une image d'insertion dans votre table ce sera quelque chose comme ceci:

Votre dernière cellule dans votre table:

<td> <img class=\"insertRow\" src=\"/images/imgInsertRow.jpg\" /> </td> 

Votre code jquery:

$('table td img.insertRow').click(function(){ 
    var newRow=$('<tr>........</tr>'); 
    $(this).parent().parent().after(newRow); 
});