Ajouter une ligne dans jQuery
Quelle est la meilleure méthode dans jQuery pour ajouter une ligne supplémentaire à une table en tant que dernière ligne?
Est-ce acceptable?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Existe-t-il des limites à ce que vous pouvez ajouter à un tableau comme celui-ci (telles que les entrées, les sélections, le nombre de lignes)?
L’approche que vous suggérez n’est pas garantie de vous donner le résultat que vous recherchez - que se passe-t-il si vous aviez une tbody par 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 cette approche à la place:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Vous pouvez inclure n'importe quoi dans la méthode after() tant qu'il s'agit d'un code HTML valide, y compris plusieurs lignes, comme dans l'exemple ci-dessus.
Update: Revisitant cette réponse après une activité récente avec cette question. eyelidness fait un commentaire positif sur le fait qu'il y aura toujours un tbody dans 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 aura pas de tbody à moins que vous n'en ayez spécifié une vous-même.
DaRKoN_ suggère ajouter à la tbody plutôt que d'ajouter du contenu après la dernière tr. Cela évite le problème de ne pas avoir de lignes, mais n’est toujours pas pare-balles, car on pourrait théoriquement avoir plusieurs éléments tbody et la ligne serait ajoutée à chacun d’eux.
Tout en pesant, je ne suis pas sûr qu'il existe une solution unique sur une ligne qui représente 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 votre table inclut toujours au moins un tbody dans votre balisage, même s’il n’a pas de lignes. Sur cette base, vous pouvez utiliser ce qui suit, qui fonctionnera quel que soit le nombre de lignes que vous avez (et compte également pour plusieurs éléments tbody):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery a une fonctionnalité intégrée pour manipuler des éléments DOM à la volée.
Vous pouvez ajouter quelque chose à votre table comme ceci:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
La chose $('<some-tag>') dans jQuery est un objet balise pouvant avoir plusieurs attributs attr pouvant être définis et obtenus, ainsi que text, qui représente le texte entre les balises: <tag>text</tag>.
Ceci est une impression assez étrange, mais il est plus facile pour vous de voir ce qui se passe dans cet exemple.
Donc, les choses ont changé depuis @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 (à l'aide de l'une des méthodes append() , prepend() , before() ou after() est une méthode <tr> et l'insère dans le premier <tbody> de votre table ou dans un nouveau <tbody> s'il n'en existe pas.
Alors oui, votre exemple de code est acceptable et fonctionnera parfaitement 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, votre nouvelle rangée serait insérée dans le pied de page - pas dans le corps.
Par conséquent, la meilleure solution consiste à inclure une balise <tbody> et à utiliser .append, plutô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 cherché et j'ai constaté que nous pouvions le faire mieux que d'utiliser JavaScript directement avec la fonction suivante.
tableObject.insertRow(index)
index est un entier qui spécifie la position de la ligne à insérer (commence à 0). La valeur -1 peut également être utilisée; de sorte que la nouvelle ligne sera insérée à la dernière position.
Ce paramètre est requis 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 toutes les structures acceptables de la table HTML.
L'exemple suivant insérera une ligne en dernier (-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 first et last fonctionnent sur la première ou la dernière balise à démarrer, et non pas fermée. 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 ajoutée à la table globale. Au moins, c'est 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 de
//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
Aussi, je peux 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 une 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 cette méthode lorsqu'il n'y a pas de ligne dans la table, ainsi que 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 existe 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 des tables avec/sans tbody et des tables avec des 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>');
J'avais quelques problèmes connexes, essayant d'insérer une ligne de tableau après la ligne cliquée Tout va bien, sauf 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 la table 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);
Je l'ai résolu de cette façon.
En utilisant 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>Ma solution:
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
utilisation:
$('#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);
Vous pouvez utiliser cette superbe jQuery add table row function. Cela fonctionne très bien avec les tables qui ont <tbody> et qui n'en ont pas. En outre, il prend en compte le colspan de votre dernière ligne de table.
Voici un exemple d'utilisation:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
La réponse de Neil est de loin le meilleur. Cependant, les choses se gâtent très vite. Ma suggestion serait d'utiliser des variables pour stocker des éléments et les ajouter à la hiérarchie du 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);
Voici un code de hacketi. Je voulais conserver un modèle de ligne dans une page HTML . Les lignes de tableau 0 à n sont rendues au moment de la demande. Cet exemple comporte une ligne codée en dur et une ligne de modèle simplifiée. La table de modèle est masquée et la balise row doit figurer dans une table valide, sinon les navigateurs peuvent la supprimer de l'arborescence DOM . L'ajout d'une ligne utilise l'identificateur compteur + 1 et la valeur actuelle est conservée dans l'attribut de données. Cela garantit que chaque ligne obtient des paramètres URL uniques.
J'ai effectué des tests sur Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (avec Symbian 3), les navigateurs Android et Firefox beta.
<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th> </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.
Je suppose que je l'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');
});
});
});
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Écrire avec une fonction javascript
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
<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 plutôt que le pied de page).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
Etant donné que j’ai aussi un moyen d’ajouter enfin une ligne ou un endroit spécifique, je pense que je devrais aussi partager ceci:
Commencez par trouver 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 pratique si vous devez ajouter une ligne à une position spécifique.
La ligne supplémentaire est ajoutée après la 5ème 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 la table. Ainsi, 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>
si vous avez une autre variable, vous pouvez accéder à la balise <td> comme celle-ci.
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);
De manière simple:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
ajoutera une nouvelle ligne au first TBODY de la table, sans dépendre d'aucune THEAD ou TFOOT présente . (Je n'ai pas trouvé d'information à 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 cet exemple, la ligne a b est insérée après le 1 2 et non après le 3 4 dans le deuxième exemple. Si la table était vide, jQuery crée TBODY pour une nouvelle ligne.
C'est ma solution
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Si vous utilisez le plugin 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);
Référencez Datatables fnAddData API Datatables
Si vous souhaitez ajouter row avant le <tr> premier enfant.
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
Si vous souhaitez ajouter row après le <tr> dernier enfant.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
Ajouter une ligne à l'aide de JQuery:
si vous voulez ajouter la ligne après le dernier de la ligne de la table enfant , vous pouvez essayer ceci
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
si vous voulez ajouter la ligne 1ère ligne de la table enfant , vous pouvez essayer ceci
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
Les réponses ci-dessus sont très utiles, mais lorsque les étudiants se réfèrent à ce lien pour ajouter des données à partir d'un formulaire, ils ont souvent besoin d'un échantillon.
Je veux contribuer un échantillon, obtenir l’aide de et utiliser .after() pour insérer tr dans la table en utilisant la chaîne interpolation.
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
<thead>
<th>Name</th>
<th>Mark</th>
</thead>
</table>
</body>
</html>Essayez ceci: moyen 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>Cela pourrait aussi être fait:
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
CONSEIL: L'insertion de lignes dans html table via innerHTML or .html() n'est pas valide dans certains navigateurs (similaire à IE9) et l'utilisation de .append("<tr></tr>") n'est pas une bonne suggestion dans aucun navigateur. Le meilleur et le plus rapide moyen utilise les codes pure javascript.
pour combiner cette manière avec jQuery, ajoutez seulement un nouveau plugin semblable à ceci à jQuery:
$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};
Et maintenant, utilisez-le dans l’ensemble du projet comme ceci:
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);