2010-01-09 4 views
1

J'ai une table où je veux insérer html dans un td sur la ligne suivante. J'ai collé une rangée ci-dessous.jquery insertion html ne fonctionne pas

<tr class="content"> 
    <td align="center"> 
     <a class="version" href="theurl">click here to update the td in the row below</a> 
    </td> 
    <td align="left">col 2</td> 
    <td align="left">col 3</td> 
    <td align="left">col 4</td> 
    <td align="left">col 5</td> 
    <td align="left">col 6</td> 
</tr> 
<tr class="version" style="display: none;"> 
    <td colspan="6"></td> <-- this is where i want to insert the new html in. 
</tr> 

mon script jquery ressemble à ceci. Maintenant, la question est: pourquoi le html n'est-il pas affiché dans le TDI? J'ai essayé append, innerHTML = "bla" et ça ne marchera pas non plus. Pensez que je suis en train de faire les choses selon le manuel, mais je ne sais pas vraiment où ça va mal.

des idées?

Répondre

2

Le next() échoue probablement car il essaie de trouver un td:first élément qui est à côté de l'actuel tr. Essayez ceci à la place:

$("a.version").click(function() { 
    var sLink = $(this).attr("href"); <-- this gets the link to retrieve data from 

    var nexttrtd = $(this).closest('tr').next('.version').find('td:first'); 
    nexttrtd.html("hello world"); // This will insert "hello world" to the td 

    return false; 
}); 

J'ai réduit un code redondant qui ne semblait pas faire quoi que ce soit. La chose étrange est que vous avez sélectionné nexttr, mais a ensuite fait la recherche de nexttrtd encore une fois depuis le début. Vous auriez pu utiliser l'élément nexttr de l'aide:

var nexttr = $(this).closest('tr').next(".version"); // gets the next tr 
var nexttrtd = nexttr.find('td:first'); // Gets the first td in that row 
+0

ne pas oublier 'nexttr.show();' après "bonjour monde" se mettre dans le td – munch

+0

Merci! J'ai mis dans le code redondant pour m'assurer que j'ai le bon élément. mais enchaîner nexttr avec .find fait tout fonctionner. il a également résolu le deuxième problème que j'ai écrit sur (.html) –

+0

@ demi-a-nerd, si elle a résolu votre problème, n'oubliez pas de marquer la réponse comme acceptée :) –

0

J'ai essayé votre code et il fonctionne pour moi. JQuery est-il correctement inclus dans l'en-tête de votre page, sans faute de frappe? Je l'ai testé avec

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
0

Assurez-vous que votre script jQuery est exécuté sur la page. Si ce n'est pas le cas, l'événement click ne sera jamais ajouté pour votre tag.

0

Une pièce fonctionnait maintenant. La clé pour obtenir le td dans le suivant était la suivante:

var nexttrtd = $ (this) .parent(). parent(). next ("tr.version, td"); $ .get (sLink, fonction (sData) { nexttrtd.html ("" + sData + ""); nexttr.css ("display", ""); }); (Une virgule dans "tr.version, td") La chose est maintenant que html n'insère pas la chaîne sData dans le mais dans le STE.

Voilà pourquoi je suis allé autour de ce en insérant «trop mais sûrement ce n'est pas la façon dont il devrait être ou quoi?

Y at-il une bonne façon de le faire?

(annexant le sData sera mais le sData à côté de la sorte que l'on ne voulait non plus.

2

html n'insère pas la chaîne sData IN, mais le à la place du.

Utilisez .append(), pas .html()!

+0

yepp qui a fonctionné, mais seulement après que je l'ai ajouté à l'élément trouvé avec nexttr.find ("td : premier ") dans le code d'origine, le code serait inséré à côté du lors de l'utilisation d'append. Merci pour votre aide. –

+0

Pour les futurs utilisateurs qui voient cela, append ajoutera uniquement de nouvelles informations à l'objet, si vous avez besoin de réinitialiser, que d'utiliser html(); –