javascript - une - jquery tableau dynamique




Ajouter une ligne de table dans jQuery (20)

À 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

Aussi, je peux recommander une petite fonction pour apporter plus 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émo Fiddle

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

Y a-t-il des limites à ce que vous pouvez ajouter à un tableau comme celui-ci (telles que des entrées, des sélections, le nombre de lignes)?


C'est ma solution

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

Comme j'ai aussi un moyen d'ajouter des lignes enfin 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);

De manière simple:

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

J'ai trouvé ce plugin AddRow assez 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.


J'avais quelques problèmes connexes, en essayant d'insérer une ligne de tableau après la ligne cliquée. Tout est bien, sauf l'appel .après () 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, ce qui me semble le plus lisible :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

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 va insérer 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.


L'approche que vous suggérez n'est pas garantie pour vous donner le résultat que vous recherchez - que se passe-t-il si vous avez un 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 indiqué dans l'exemple ci-dessus.

Mise à jour: Revisiter cette réponse après une activité récente avec cette question. paupière fait un bon commentaire 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 tbody spécifié un vous-même.

DaRKoN_ suggests ajouter au tbody plutôt que d'ajouter du contenu après le dernier 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.

En pesant tout, 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 si elle 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>');

Ma solution:

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

usage:

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

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

Que faire si vous aviez un <tbody> et <tfoot> ?

Tel que:

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

Ensuite, il insère votre nouvelle ligne dans le pied de page - pas au corps.

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

$("#myTable > tbody").append("<tr><td>row content</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érez-vous à Datatables fnAddData Datatables API


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 d' 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), Android et les navigateurs bêta de Firefox.

<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.


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 qui peut avoir plusieurs attributs attr pouvant être définis et obtenir, ainsi que du text , qui représente le texte entre les balises 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.


je recommande

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

par opposition à

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

Les first et last mots-clés fonctionnent 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 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>

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

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

<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 serait peut-être préférable d’utiliser une fausse ligne au lieu d’un pied de page).

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




html-table