2010-05-31 3 views
8

J'ai une table définie comme suit:JQuery - Set TBODY

<table id="myTable" cellpadding="0" cellspacing="0"> 
    <thead><tr> 
    <th>Date</th> 
    <th>First Name</th> 
    <th>Last Name</th> 
    </tr></thead> 

    <tbody> 
    <!-- rows will go here --> 
    </tbody> 
</table> 

Je suis en train de remplir de manière dynamique 'myTable' lors de l'exécution via JavaScript. Pour accommoder cela, j'utilise JQuery. Je veux écrire du HTML dans l'élément tbody dans 'myTable'. Cependant, j'ai de la difficulté à comprendre comment faire cela avec les sélecteurs. Je sais que je peux obtenir « myTable » en utilisant:

$("#myTable") 

Je sais que je peux définir le code HTML de myTable en utilisant les éléments suivants:

$("#myTable").html(someHtmlString); 

Cependant, qui définit le code HTML de la table entière . En réalité, je veux juste mettre le HTML dans le TBODY de 'myTable'. Comment est-ce que je fais ceci avec JQuery?

Merci!

+2

a ce problème été résolu? – user113716

Répondre

0

Essayez:

$("#myTable tbody") 
3

Trouver l'élément tbody et l'utilisation append, si vous voulez ajouter des lignes ou html, si vous voulez remplacer toutes les lignes.

$('#myTable tbody').append(someRowHtml); 

$('#myTable tbody').html(someRowHtml); 

Notez que si vous avez plus d'un élément de tbody vous aurez également besoin d'utiliser le sélecteur :first (ou nth-child - ne pas oublier que, que bien qu'il soit basé sur zéro, vous avez un élément thead) pour obtenir le bon.

$('#myTable tbody:first').append(...); 
+0

Il n'est pas nécessaire d'utiliser une fonction pour trouver le corps. –

+0

@Gert G - Je l'ai réalisé juste après l'avoir écrit. Si vous aviez déjà une référence à la table, ce serait le chemin à parcourir. – tvanfosson

2
$("#myTable tbody").html(someHtmlString); 
21

Vous utiliseriez:

$("#myTable > tbody"); 

qui sélectionne tbody éléments qui sont le descendant direct de #myTable.

Alternativement, vous pouvez utiliser:

$('tbody', '#myTable'); 

qui trouve tous les éléments tbody dans le cadre de #myTable.

En jQuery, il existe souvent plusieurs façons d'accomplir ce dont vous avez besoin.

Une autre façon, serait de le faire:

$('#myTable').children('tbody'); 

qui est effectivement le même que ma première solution ci-dessus.

jQuery a de grands docs:

Selectors:http://api.jquery.com/category/selectors/

Traversant:http://api.jquery.com/category/traversing/

0

donner votre tbody un identifiant, puis faire la même chose avec ce que vous avez fait avec votre table

< tbody id = 'myTbody' >

1

Essayez d'utiliser $("#myTable > tbody").html("");

0

Vous pouvez faire comme:

$("#myTable tbody").html(html_here); 
0
$('#myTable tbody').append('<tr><td>foo</td><td>bar</td></tr>');