Ajouter une ligne de tableau dans jQuery

Quelle est la meilleure méthode dans jQuery pour ajouter une ligne supplémentaire à un tableau comme dernière ligne?

Est-ce acceptable?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Y a-t-il des limites à ce que vous pouvez ajouter à une table comme celle-ci (comme les entrées, les sélections, le nombre de lignes)?

L'approche que vous proposez n'est pas garantie de vous donner le résultat que vous recherchez - et si vous en aviez un tbodypar exemple:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Vous vous retrouveriez avec ce qui suit:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Je recommanderais donc plutôt cette approche:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Vous pouvez inclure n'importe quoi dans la after()méthode tant qu'il s'agit d'un code HTML valide, y compris plusieurs lignes selon l'exemple ci-dessus.

Mise à jour: réexamen de cette réponse suite à une activité récente avec cette question. la paupière fait un bon commentaire qu'il y aura toujours un tbodydans le DOM; c'est vrai, mais seulement s'il y a au moins une ligne. Si vous n'avez pas de lignes, il n'y en aura pastbody sauf si vous en avez spécifié une vous-même.

DaRKoN_ suggère d' ajouter à latbody plutôt que d'ajouter du contenu après le dernier tr. Cela résout le problème de l'absence de lignes, mais n'est toujours pas à l'épreuve des balles car vous pourriez théoriquement en avoir plusieurstbody éléments et la ligne serait ajoutée à chacun d'eux.

En pesant tout, je ne suis pas sûr qu'il existe une seule solution sur une seule ligne qui tienne compte de chaque scénario possible. Vous devrez vous assurer que le code jQuery correspond à votre balisage.

Je pense que la solution la plus sûre est probablement de s'assurer que vous en tableincluez toujours au moins un tbodydans votre balisage, même s'il n'a pas de lignes. Sur cette base, vous pouvez utiliser les éléments suivants, qui fonctionneront autant de lignes que vous avez (et tiennent également compte de plusieurs tbodyéléments):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

jQuery a une fonction intégrée pour manipuler les éléments DOM à la volée.

Vous pouvez ajouter n'importe quoi à votre table comme ceci:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

La $('<some-tag>')chose dans jQuery est un objet balise qui peut avoir plusieurs attrattributs qui peuvent être définis et récupérés, ainsi que text, qui représente le texte entre la balise ici:<tag>text</tag> .

Il s'agit d'une indentation assez étrange, mais il est plus facile pour vous de voir ce qui se passe dans cet exemple.

Les choses ont donc changé depuis que @Luke Bennett a répondu à cette question. Voici une mise à jour.

jQuery depuis la version 1.4 (?) détecte automatiquement si l'élément que vous essayez d'insérer (en utilisant l'un des append(),prepend() , before()ou after()méthodes) est un <tr>et l' insère dans la première <tbody>dans votre table ou encapsule dans une nouvelle <tbody>si l' on ne exister.

Alors oui, votre exemple de code est acceptable et fonctionnera correctement avec jQuery 1.4+. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Et si vous aviez un <tbody>et un <tfoot>?

Tel que:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Ensuite, il insérerait votre nouvelle ligne dans le pied de page - pas dans le corps.

Par conséquent, la meilleure solution consiste à inclure une <tbody>balise et à utiliser .appendplutôt que .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Je sais que vous avez demandé une méthode jQuery. J'ai beaucoup regardé et je trouve que nous pouvons le faire d'une meilleure manière que d'utiliser JavaScript directement par la fonction suivante.

tableObject.insertRow(index)

indexest un entier qui spécifie la position de la ligne à insérer (commence à 0). La valeur -1 peut également être utilisée; ce qui entraîne que la nouvelle ligne sera insérée à la dernière position.

Ce paramètre est obligatoire dans Firefox et Opera , mais il est facultatif dans Internet Explorer, Chrome et Safari .

Si ce paramètre est omis, insertRow() insère une nouvelle ligne à la dernière position dans Internet Explorer et à la première position dans Chrome et Safari.

Cela fonctionnera pour chaque structure acceptable de tableau HTML.

L'exemple suivant insère une ligne dans last (-1 est utilisé comme index):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

J'espère que ça aide.

je recommande

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

par opposition à

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

Les mots clés firstet lastfonctionnent sur la première ou la dernière balise à démarrer et non à fermer. Par conséquent, cela fonctionne mieux avec les tables imbriquées, si vous ne voulez pas que la table imbriquée soit modifiée, mais plutôt ajoutez à la table globale. C'est du moins ce que j'ai trouvé.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

À mon avis, le moyen le plus rapide et le plus clair est

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

voici la démo Fiddle

Je peux aussi recommander une petite fonction pour faire plus de changements html

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Si vous utilisez mon compositeur de cordes, vous pouvez le faire comme

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Voici la démo Fiddle

Cela peut être fait facilement en utilisant la fonction "last ()" de jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

J'utilise de cette façon quand il n'y a pas de ligne dans le tableau, ainsi, chaque ligne est assez compliquée.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

Pour la meilleure solution publiée ici, s'il y a une table imbriquée sur la dernière ligne, la nouvelle ligne sera ajoutée à la table imbriquée au lieu de la table principale. Une solution rapide (en considérant les tables avec / sans tbody et les tables avec tables imbriquées):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Exemple d'utilisation:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

Je l'ai résolu de cette façon.

Utilisation de jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

Fragment

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>

J'avais des problèmes connexes, j'essayais d'insérer une ligne de tableau après la ligne cliquée. Tout va bien sauf que l'appel .after () ne fonctionne pas pour la dernière ligne.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

J'ai atterri avec une solution très désordonnée:

créez le tableau comme suit (id pour chaque ligne):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

etc ...

et alors :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Vous pouvez utiliser cette excellente fonction jQuery ajouter une ligne de table . Cela fonctionne très bien avec des tables qui ont<tbody> et qui n'en ont pas. Il prend également en compte le colspan de votre dernière ligne de tableau.

Voici un exemple d'utilisation:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Ma solution:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

usage:

$('#Table').addNewRow(id1);

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

La réponse de Neil est de loin la meilleure. Cependant, les choses se compliquent très vite. Ma suggestion serait d'utiliser des variables pour stocker des éléments et les ajouter à la hiérarchie DOM.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Écrivez avec une fonction javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

J'ai trouvé ce plugin AddRow très utile pour gérer les lignes de table. Cependant, la solution de Luke serait la meilleure solution si vous avez juste besoin d'ajouter une nouvelle ligne.

Voici du code de piratage hacketi. Je voulais conserver un modèle de ligne dans un HTML page . Les lignes de table 0 ... n sont rendues au moment de la demande, et cet exemple a une ligne codée en dur et une ligne de modèle simplifiée. La table de modèles est masquée et la balise de ligne doit se trouver dans une table valide, sinon les navigateurs peuvent la supprimer de l' arborescence DOM . L'ajout d'une ligne utilise le compteur + 1 identifiant et la valeur actuelle est conservée dans l'attribut de données. Il garantit que chaque ligne obtient une URL unique paramètres d' .

J'ai exécuté des tests sur Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (avec Symbian 3), Android stock et Firefox beta navigateurs.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: je donne tous les crédits à l'équipe jQuery; ils méritent tout. Programmation JavaScript sans jQuery - Je ne veux même pas penser à ce cauchemar.

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

Je suppose que j'ai fait dans mon projet, le voici:

html

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

C'est ma solution

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

si vous avez une autre variable, vous pouvez accéder à une <td>balise comme celle-ci, essayez.

De cette façon, j'espère que ce serait utile

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

Comme j'ai également un moyen d'ajouter enfin une ligne ou tout autre endroit spécifique, je pense que je devrais également partager ceci:

Découvrez d'abord la longueur ou les rangées:

var r=$("#content_table").length;

puis utilisez le code ci-dessous pour ajouter votre ligne:

$("#table_id").eq(r-1).after(row_html);

Pour ajouter un bon exemple sur le sujet, voici une solution de travail si vous devez ajouter une ligne à une position spécifique.

La ligne supplémentaire est ajoutée après la 5e ligne ou à la fin du tableau s'il y a moins de 5 lignes.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

Je mets le contenu sur un conteneur prêt (caché) sous le tableau .. donc si vous (ou le concepteur) devez le modifier, il n'est pas nécessaire de modifier le JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Vous pouvez mettre en cache la variable de pied de page et réduire l'accès au DOM (Remarque: il sera peut-être préférable d'utiliser une fausse ligne au lieu du pied de page).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

ajoutera une nouvelle ligne à la première TBODY du tableau, sans dépendre d'aucune THEADou TFOOTprésente. (Je n'ai pas trouvé d'informations à partir de quelle version de jQuery.append() ce comportement est présent.)

Vous pouvez l'essayer dans ces exemples:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

Dans quel exemple la a bligne est insérée après 1 2, pas après 3 4dans le deuxième exemple. Si la table était vide, jQuery crée TBODYune nouvelle ligne.

Si vous utilisez le plug-in Datatable JQuery, vous pouvez essayer.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Reportez-vous à l' API fnAddData Datatables

D'une manière simple:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Essayez ceci: manière très simple

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>