web-dev-qa-db-fra.com

Jquery insère une nouvelle ligne dans la table à un certain index

Je sais comment ajouter ou ajouter une nouvelle ligne dans une table à l'aide de jquery:

$('#my_table > tbody:last').append(html);

Comment insérer la ligne (donnée dans la variable html) dans un "index de ligne" spécifique i. Donc, si i=3, par exemple, la ligne sera insérée en tant que 4ème ligne de la table.

javascriptjqueryhtml-table
102
aeq

Vous pouvez utiliser .eq() et .after() comme ceci:

$('#my_table > tbody > tr').eq(i-1).after(html);

Les index sont basés sur 0, donc pour être la 4ème ligne, vous avez besoin de i-1, puisque .eq(3) serait la 4ème ligne, vous devez revenir à la 3ème ligne (2) et insérer .after() that.

143
Nick Craver

Essaye ça:

var i = 3;

$('#my_table > tbody > tr:eq(' + i + ')').after(html);

ou ca:

var i = 3;

$('#my_table > tbody > tr').eq( i ).after(html);

ou ca:

var i = 4;

$('#my_table > tbody > tr:nth-child(' + i + ')').after(html);

Tous ces éléments placeront la ligne dans la même position. nth-child utilise un index basé sur 1.

15
user113716

Remarque:

$('#my_table > tbody:last').append(newRow); // this will add new row inside tbody

$("table#myTable tr").last().after(newRow);  // this will add new row outside tbody 
                                             //i.e. between thead and tbody
                                             //.before() will also work similar
3
Nilesh R. Makwana

Je sais que cela arrive en retard, mais pour ceux qui veulent le mettre en œuvre uniquement à l'aide de la variable JavaScript, voici comment procéder:

  1. Obtenez la référence à la tr actuelle sur laquelle vous avez cliqué.
  2. Créez un nouvel élément tr DOM.
  3. Ajoutez-le au nœud parent tr référé.

HTML:

<table>
     <tr>
                    <td>
                        <button id="0" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>

     <tr>
                    <td>
                        <button id="1" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>
     <tr>
                    <td>
                        <button id="2" onclick="addRow()">Expand</button>
                    </td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
                    <td>abc</td>
     </tr>

En JavaScript:

function addRow() {
        var evt = event.srcElement.id;
        var btn_clicked = document.getElementById(evt);
        var tr_referred = btn_clicked.parentNode.parentNode;
        var td = document.createElement('td');
        td.innerHTML = 'abc';
        var tr = document.createElement('tr');
        tr.appendChild(td);
        tr_referred.parentNode.insertBefore(tr, tr_referred.nextSibling);
        return tr;
    }

Cela ajoutera la nouvelle ligne du tableau exactement sous la ligne sur laquelle le bouton est cliqué. 

1
Prateek

Ajoutant à la réponse de Nick Craver et prenant également en compte le point soulevé par rossisdead, si un scénario comme celui-ci doit être ajouté à une table vide, ou avant une certaine ligne, j'ai procédé comme suit:

var arr = []; //array
if (your condition) {
  arr.Push(row.id); //Push row's id for eg: to the array
  idx = arr.sort().indexOf(row.id);

  if (idx === 0) {   
    if (arr.length === 1) {  //if array size is only 1 (currently pushed item)
        $("#tableID").append(row);
    }
    else {       //if array size more than 1, but index still 0, meaning inserted row must be the first row
       $("#tableID tr").eq(idx + 1).before(row);
    }   
  }          
  else {     //if index is greater than 0, meaning inserted row to be after specified index row
      $("#tableID tr").eq(idx).after(row);
  }    
}

J'espère que ça aide quelqu'un. 

0
Jaggan_j

Utilisez le sélecteur eq pour sélectionner la nième ligne (base 0) et ajoutez votre ligne après en utilisant après , afin:

$('#my_table > tbody:last tr:eq(2)').after(html);

où html est une tr

0
Adam
$('#my_table tbody tr:nth-child(' + i + ')').after(html);
0
Arjan

essaye ça:

$("table#myTable tr").last().after(data);
0
Agus Puryanto