Ajouter une ligne de tableau dans jQuery

2425

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)?

Darryl Hein
la source
2
Thxs Ash. Moi aussi, j'apprends juste jQuery et j'ai du mal à trouver la meilleure façon, surtout des choses simples. La raison pour laquelle ils sont en 2 questions est parce que j'en ai posté une, puis presque une heure plus tard, j'ai réalisé que j'aurais dû mettre l'autre et je ne pensais pas que je devrais changer la première.
Darryl Hein
30
Pour cette raison: google.com/search?q=jquery+add+table+row
Darryl Hein
17
FYI - Évitez d'utiliser plusieurs ajouts (ralentit considérablement les performances), plutôt construisez votre chaîne ou utilisez la jointure JavaScript qui est beaucoup plus rapide.
Gerrit Brink
Juste au cas où la ligne est trop complexe, ce que je fais est de garder la première ligne cachée avec la structure requise, de faire un clone et de modifier le texte et l'insérer après la première ligne, de cette façon, si vous récupérez les données de la réponse ajax, votre table sera créée, souvenez-vous clonez-le en dehors de la boucle, puis utilisez-le pour modifier le contenu à l'intérieur de la boucle. $ ("# mainTable tbody"). append (row); la ligne est la copie du clone modifié :)
Aadam

Réponses:

2143

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>');
Luke Bennett
la source
6
@Rama, non. Il doit y avoir une meilleure solution.
Brian Liang
40
Il y aura toujours un tbody dans le DOM.
paupières
4
un corps vide ne valide cependant pas votre
code
40
Une amélioration mineure à la solution autrement intéressante serait d'optimiser les sélecteurs. Vous pouvez obtenir des améliorations de vitesse avec: $('#myTable').find('tbody:last')au lieu de $('#myTable > tbody:last').
Erik Töyrä Silfverswärd
2
"sans paupières fait un bon commentaire qu'il y aura toujours un tbody dans le DOM" - j'ai juste essayé ceci sans tbody et cela n'a pas fonctionné - cela ne fonctionne que s'il y a un tbody.
BrainSlugs83
771

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.

Neil
la source
60
Pour ceux qui essaient ceci, notez soigneusement les emplacements des parenthèses. Une bonne imbrication est cruciale.
Ryan Lundy
9
Et les balises de fermeture? Ne sont-ils pas nécessaires?
senfo
9
$ ("# TableClassname") ne devrait-il pas réellement être $ ("# tableID") puisque le symbole de hachage fait référence à l'ID et non au nom de classe?
Dave
7
Je déteste un enchaînement aussi bizarre. C'est un cauchemar de maintenir le code plein de telles choses.
danseur le
4
@senfo l'ajout d' éléments enfants les créera automatiquement.
Michel de Ruiter
308

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>');
Salman von Abbas
la source
2
Soyez prudent avec cette hypothèse. Si votre balisage ajouté commence par \ n ou \ n \ r, jQuery ne détectera pas qu'il s'agit d'un <tr> et l'ajoutera à la <table> et non à la <tbody>. Je viens de rencontrer cela avec un balisage généré par une vue MVC qui avait une ligne supplémentaire au début.
Mik
@Mik merci pour l'avertissement! Je suppose que je yourString.trim()pourrais y remédier.
Salman von Abbas du
Bien sûr, mais il faut y penser. Mieux vaut prendre l'habitude de joindre le <tbody> si vous savez qu'il y en a un.
Mik
jQuery 3.1 nécessite toujours la spécification d'un tbody. Découvrez-le ici: jsfiddle.net/umaj5zz9/2
user984003
Cela provoque le rafraîchissement de ma page. Comment puis-je empêcher cela?
Avi
168

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>");
ChadT
la source
10
Vous avez mal mis en œuvre votre tfoot. Il doit venir avant le tbody, pas après - voir w3.org/TR/html4/struct/tables.html#h-11.2.3 . Par conséquent, ma solution fonctionne toujours, sauf si vous choisissez de briser les normes (auquel cas vous pouvez vous attendre à ce que d'autres choses tournent mal également). Ma solution fonctionne aussi, que vous ayez ou non un corps, alors que votre proposition échouera si aucun corps n'est présent.
Luke Bennett
6
Malgré toutes les erreurs dans <tfoot />, c'est une meilleure solution. S'il n'y a pas de <tbody />, vous pouvez utiliser la même technique sur la <table /> elle-même. Alors que la «réponse acceptée» nécessite une vérification supplémentaire pour voir s'il existe ou non une ligne existante. (Je sais que l'OP n'a pas spécifié cette exigence, mais cela n'a pas d'importance - ce message arrive en premier sur une recherche Google pour cette technique, et la meilleure réponse n'est pas la meilleure.)
CleverPatrick
5
C'est une meilleure solution que de trouver. Dans plusieurs itérations, cette technique semble toujours fonctionner. En tant que FYI ajouté, vous pouvez utiliser .prepend pour ajouter la ligne au début du tableau tandis que .append place la ligne à la fin du tableau.
Lance Cleveland
C'est incorrect, il ajoutera une ligne à chaque ligne de tbody
garg10may
@ garg10may Pouvez-vous me dire comment? Il cible le tbody, pas n'importe quel élément enfant.
ChadT
64

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.

shashwat
la source
2
le problème avec cette méthode (comme je viens de le découvrir) est que si vous avez un pied de page, il ajoutera APRÈS le pied de page avec le -1 comme index.
kdubs
35

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>
Curtor
la source
32

À 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

sensuelle
la source
Si vous en avez plusieurs, tbodyvous pouvez obtenir plusieurs inserts
Mark Schultheiss
Oui, vous pouvez :) Vous pouvez essayer $("SELECTOR").last()de limiter votre collection de tags
sulest
23

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
Nischal
la source
9
Bonne idée, mais je pense que vous voudriez changer le sélecteur en #tableId tr car en ce moment vous obtiendrez le tableau ajouter la ligne sous le tableau.
Darryl Hein
17

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

...
Dominique
la source
Je vous remercie. C'est une solution très élégante. J'aime la façon dont il garde le modèle dans la grille. Cela rend le code beaucoup plus simple et plus facile à lire et à maintenir. Merci encore.
Rodney
14

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>');
Oshua
la source
14

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>

Anton vBR
la source
Je peux maintenant ajouter avec succès des données dynamiques dans une nouvelle ligne, mais après avoir utilisé cette méthode, mon filtre personnalisé ne fonctionne pas .. Avez-vous une solution pour cela? Merci
Arjun
Je pense que vous devez appeler une fonction de mise à jour en quelque sorte. Je devais dire sans exemple.
Anton vBR
13

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);
Avron Olshewsky
la source
Je pense que cela devrait être une nouvelle question, au lieu d'une réponse à une question existante ...
Darryl Hein
11

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'));
Ouzbekjon
la source
Je ne vois pas que cela soit terriblement utile. Il ne fait qu'ajouter une ligne de tableau vide à un tableau. En règle générale, si ce n'est pas toujours, vous souhaitez ajouter une nouvelle ligne de tableau contenant des données.
Darryl Hein
1
Mais c'est généralement ce que vous voulez. Cette fonction vous permet d'ajouter une ligne vide à n'importe laquelle de vos tables, quel que soit le nombre de colonnes et de plages de lignes dont vous disposez, ce qui en fait une fonction UNIVERSELLE. Vous pouvez continuer à partir de là par exemple avec $ ('. Tbl tr: last td'). Le tout est d'avoir une fonction universelle !!!
Ouzbekjon
Si votre fonction ajoute également des données dans vos nouvelles lignes, vous ne pourrez pas les utiliser la prochaine fois sur votre prochain projet. Dans quel but?! C'est à mon avis cependant, vous n'avez pas besoin de le partager ...
Uzbekjon
Si vous proposez la fonction qui ne fait pas partie d'un package commun, veuillez mettre le code de fonction complet ici. Je vous remercie.
Yevgeniy Afanasyev
10

Ma solution:

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

usage:

$('#Table').addNewRow(id1);
Ricky G
la source
alors s'il n'y a pas tbodyde table .. ?? signifie qu'il peut y avoir une ligne directement à l'intérieur de l' <table>élément, même sans en-tête.
shashwat
Je recommanderais fortement que vous ayez votre balisage avec <TBody> afin qu'il soit aux normes HTML 5, sinon vous pouvez toujours faire $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); qui ajoute juste une ligne dans le tableau.
Ricky G
Je pense que si vous voulez en faire une fonction, vous pouvez peut-être retourner un objet jQuery pour la nouvelle ligne afin qu'il soit chaînable.
Chaos
10
    // 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);
Pankaj Garg
la source
Bien que cela puisse être une réponse, elle n'est pas très utile à un visiteur plus tard ... Veuillez ajouter quelques explications autour de votre réponse.
Jayan
9

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);
GabrielOshiro
la source
9
<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>';
Jakir Hossain
la source
9

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.

Vitalii Fedorenko
la source
7

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.

Qui
la source
7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Vivek S
la source
7

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');
    });
      });
});
SNEH PANDYA
la source
7

C'est ma solution

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Daniel Ortegón
la source
7

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);
MEAbid
la source
6

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);
Jaid07
la source
6

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>
d.raev
la source
6
<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>")
Pavel Shkleinik
la source
5
$('#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.

Alexey Pavlov
la source
5

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

Praveena M
la source
5

D'une manière simple:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
vipul sorathiya
la source
Pourriez-vous élaborer davantage votre réponse en ajoutant un peu plus de description sur la solution que vous proposez?
abarisone
4

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>

rajmobiapp
la source