Ajouter une ligne de tableau dans jQuery
https://stackoverflow.com/questions/171027
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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>');
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) ?
La solution
L'approche que vous suggérez ne vous garantit pas nécessairement le résultat que vous recherchez - que se passera-t-il si vous aviez un tbody 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.
Mise à jour: nous revenons dans cette réponse à la suite d'une activité récente concernant cette question. eyelidness fait un commentaire positif sur le fait qu'il y aura toujours un tr 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 table sauf si vous en avez spécifié une vous-même.
DaRKoN_ suggère d’ajouter au contenu plutôt que d’ajouter du contenu après le dernier <=>. Cela résout le problème de l’absence de lignes, mais n’est toujours pas pare-balles, car vous pourriez théoriquement avoir plusieurs <=> éléments et la ligne serait ajoutée à chacun d’eux.
En pesant le maximum, je ne suis pas sûr qu'il existe une solution unique à 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 vous assurer que votre <=> inclut toujours au moins un <=> dans votre balisage, même s'il ne contient 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):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Autres conseils
jQuery a une fonctionnalité intégrée pour manipuler des éléments DOM à la volée.
Vous pouvez ajouter n'importe quoi à votre tableau, comme suit:
$("#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 qui peut avoir plusieurs attr attributs pouvant être définis et obtenus, ainsi que text, qui représente le texte entre les balises ici: <tag>text</tag>.
Ceci est un retrait 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 (à l'aide de l'un des < => , append() , prepend() , ou before() method) est un after() et l’insère dans le premier <tr> de votre table ou dans un nouveau <tbody> s’il n’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>?
Tels que:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Ensuite, votre nouvelle ligne sera insérée dans le pied de page - pas dans le corps.
La meilleure solution consiste donc à inclure une balise .append et à utiliser .after au lieu de <=>.
$("#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 trouvé 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; 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 & nbsp; Explorer et à la première position dans Chrome et Safari.
Cela fonctionnera pour toutes les structures acceptables d'un tableau HTML.
L'exemple suivant insère une ligne en dernier (-1 sert d'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 cela vous aidera.
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, non 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
//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 Violon
Je peux également recommander une petite fonction pour apporter davantage de modifications 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émoViolon
Ceci peut être fait facilement en utilisant le " last () & "; fonction 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 des problèmes connexes, j'essayais 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 (identifiant pour chaque ligne):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
etc ...
et ensuite:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
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"))
)
Extrait
$('#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>
Vous pouvez utiliser ce formidable jQuery ajouter une ligne au tableau . Cela fonctionne très bien avec les tables qui ont <tbody> et qui n'en ont pas. En outre, il prend en considération 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'));
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);
La réponse de Neil est de loin la meilleure. 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);
<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>';
J'ai trouvé ce le plugin AddRow très utile pour la gestion des lignes de table. Cependant, la solution de Luke serait la solution idéale si vous devez simplement ajouter une nouvelle ligne.
Voici un code hacketi. Je souhaitais 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 de ligne doit figurer dans une table valide. Sinon, les navigateurs peuvent la supprimer du DOM <. / a> arbre. 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 reçoit des paramètres uniques.
J'ai effectué des tests sur Internet & nbsp; Explorer & nbsp; 8, Internet & nbsp; Explorer & nbsp; 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (avec les Symbian 3), les navigateurs Android Stock et la version bêta de Firefox.
<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.
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
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');
});
});
});
Ceci est ma solution
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Comme j’ai aussi un moyen d’ajouter une rangée enfin ou un endroit précis, je pense que je devrais aussi partager ceci:
Commencez par trouver la longueur ou les lignes:
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 place le contenu sur un conteneur prêt (caché) sous le tableau. 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>
<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 serait peut-être préférable d'utiliser une fausse ligne plutôt qu'un pied de page).
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
si vous avez une autre variable à laquelle vous pouvez accéder dans <td> la balise comme celle-ci, essayez.
De cette façon, j'espère que cela vous sera 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);
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
ajoutera une nouvelle ligne au premier TBODY de la table, sans dépendre d'aucun THEAD ou TFOOT présent.
(Je n'ai trouvé aucune information à partir de quelle version de jQuery .append() ce comportement est présent.)
Vous pouvez l'essayer dans les exemples suivants:
<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 a b la ligne est insérée après 1 2 et non après 3 4 dans le deuxième exemple. Si la table était vide, jQuery crée <=> une nouvelle ligne.
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);
Consulter des tables de données fnAddData API de tables de données
De manière simple:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
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 <=> après le <=> dernier enfant.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
