Le code suivant fonctionne bien car je suis capable d'ajouter plusieurs lignes «tr» selon mes besoins, mais en même temps, plusieurs éléments «tbody» sont également créés. Donc, j'essaye de trouver une solution où je crée seulement une fois «tbody» et ajoute plusieurs lignes.

$results.each(function(){
       $('#tbl').append($('<tbody>')
                .append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

<table id="tbl">
        <thead>
            <tr>
                <th>Item</th>
                <th>Name</th>
                <th>No</th>                    
            </tr>        
        </thead>        
</table>
1
smtp 16 juil. 2015 à 02:19

2 réponses

Meilleure réponse

Les navigateurs n'ont pas besoin d'ajouter un tbody et en ajouteront un dans les coulisses.

Ajoutez simplement vos lignes:

results.each(function(){
       $('#tbl').append($('<tr>')
                .append('<td>' + Item_val + '</td>')
                .append('<td>' + Name_val + '</td>')
                .append('<td>' + No_val + '</td>'))                                
        );
});

Voici un test simple montrant qu'un tbody est ajouté automatiquement lorsqu'un TR est ajouté:

HTML

<table></table>

Code:

alert($('table tbody').length);   // alerts 0
$('table').append('<tr>'); 
alert($('table tbody').length);   // alerts 1

JSFiddle: http://jsfiddle.net/m2z2cmur/

Remarques:

  • Bien que la spécification du navigateur HTML5 stipule qu'une table peut "contenir directement TR éléments", l'analyseur de tous les navigateurs (?) Utilise une approche rétrocompatible où ils insèrent un tbody lors de l'ajout d'un {{X2} } (si aucun tbody n'est présent)
3
Gone Coding 16 juil. 2015 à 13:55
var mytablecontainer = $('#tbl');
var mytable = mytablecontainer.find('tbody');
if (!mytable.length){mytablecontainer.append($('<tbody>')}
mytable = mytablecontainer.find('tbody');
mytable.append()// rest of your appends
0
Mark Schultheiss 15 juil. 2015 à 23:28