2017-10-02 2 views
0

Je suis nouveau sur JQuery et j'essaye d'ajouter des lignes à une table existante.Comment ajouter des lignes de table à la table html en utilisant JQuery

  1. Quel est le problème avec le code?

  2. Comment puis-je insérer une ligne vide sans spécifier les valeurs dans les colonnes?

  3. Existe-t-il une meilleure façon de procéder? Comment?

$(document).ready(function() { \t \t \t 
 
\t \t \t var tbl = $('#mytable'); 
 
\t \t \t appendTableRow(tbl) 
 
\t \t }); 
 
\t \t 
 
\t \t function appendTableRow(table) { \t \t \t  
 
\t \t \t var newrow = ''; 
 

 
\t \t \t newrow += "<tr>"; 
 
\t \t \t newrow += "<td>21</td>"; 
 
\t \t \t newrow += "<td>22</td>"; 
 
\t \t \t newrow += "</tr>"; 
 
\t \t \t \t \t \t 
 
\t \t \t table.find('tbody tr:last').append(newrow);  
 
\t \t }
table { 
 
\t \t border-collapse: collapse; 
 
\t } 
 

 
\t table td { 
 
\t \t border: 1px solid black; 
 
\t } 
 
    
 
    table th { 
 
\t \t border: 1px solid black; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
\t <thead> 
 
\t \t <th>Col1</th> 
 
\t \t <th>Col2</th> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t <td>11</td> 
 
\t \t <td>12</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
\t </table>

+2

Ne pas ajouter à la ligne de table, donc ** ** PAS 'table.find ('tbody tr: dernière) append (newRow);. ', mais pour le corps de la table:' table.find ('tbody'). append (newrow); '. – skobaljic

+1

Copie possible de [Comment ajouter des lignes à une table en utilisant jQuery?] (Https://stackoverflow.com/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery) – krishnar

Répondre

0

Votre code fonctionne très bien. Juste ajouter à tbody.

$(document).ready(function() { \t \t \t 
 
\t \t \t var tbl = $('#mytable'); 
 
\t \t \t appendTableRow(tbl) 
 
\t \t }); 
 
\t \t 
 
\t \t function appendTableRow(table) { \t \t \t  
 
\t \t \t var newrow = ''; 
 

 
\t \t \t newrow += "<tr>"; 
 
\t \t \t newrow += "<td>21</td>"; 
 
\t \t \t newrow += "<td>22</td>"; 
 
\t \t \t newrow += "</tr>"; 
 
\t \t \t \t \t \t 
 
\t \t \t $('tbody').append(newrow);  
 
\t \t }
table { 
 
\t \t border-collapse: collapse; 
 
\t } 
 

 
\t table td { 
 
\t \t border: 1px solid black; 
 
\t } 
 
    
 
    table th { 
 
\t \t border: 1px solid black; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
\t <thead> 
 
\t \t <th>Col1</th> 
 
\t \t <th>Col2</th> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t <td>11</td> 
 
\t \t <td>12</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
\t </table>

0

1) Il n'y a rien de mal , il fait ce qu'il est écrit à faire. Par programme, ça fonctionne bien.

(je me sens presque c'est une question piège)

2) Au lieu de newrow += "<td>21</td>"; utiliser newrow += "<td> </td>";?

3) Existe-t-il une meilleure façon de procéder? Comment?

^Ces types de questions sont hors sujet ici.

+0

Ce n'était pas une question piège! Si vous exécutez le code, vous verrez qu'aucune nouvelle ligne n'a été créée. Les deux cellules créées ont été jointes à côté de la 1ère rangée. –