jquery e Utilizzo della funzione append()

[kikoweb]

Salve,
ho il seguente codice html:

<tr id="tr424" class="ascend">
	<td class="rank">2</td>		
	<td class="team">link</td>
	<td class="pts">42</td>
	<td class="num">19</td>
</tr>

Vorrei inserire un'altra cella subito dopo quando si clicca il link, avendo così questo codice finale:

<tr id="tr424" class="ascend">
	<td class="rank">2</td>		
	<td class="team">link</td>
	<td class="pts">42</td>
	<td class="num">19</td>
</tr>
<tr>
<td colspan="4">PROVA</td>
</tr>

Questo è il codice che ho scritto ma non riesco a risolvere il problema:

<script type="text/javascript"> 

$(document).ready(function() {

    $('.team a').on('click', function() { 
         var p = $(this).parent();
$(p).append('<tr><td colspan="4">PROVA</td></tr>');
            return false;            
     });  
 }); 


</script>

Spero che qualcuno di voi possa aiutarmi.
Grazie! e BUON ANNO A TUTTI in anticipo

[cavicchiandrea]

p non è un oggetto ma una variabile prova così

<script type="text/javascript"> 

$(document).ready(function() {

    $('.team a').on('click', function() { 
         var p = $(this).parent();
p.append('<tr><td colspan="4">PROVA</td></tr>');
     });  
 }); 
</script>

P.S. Consiglio, meglio sempre monitorare con la console aperta le modifiche generate da jquery che avvengono nel documento oltre a capire se l'operazione va vene vedi se ci sono errori di sintassi

[lucavizzi]

Lo script non funziona anche perchè il "parent" del "this" (.team a) è il tag "td" e non il tag "table", quindi lo script diventa:

<script type="text/javascript"> 
$(document).ready(function() {
    $('.team a').on('click', function() { 
         var td = $(this).parent();
         var tr=td.parent();
         var table=tr.parent();
         table.append('<tr><td colspan="4">PROVA</td></tr>');
     });  
 }); 
</script>

oppure in una forma più sintetica:

<script type="text/javascript"> 
$(document).ready(function() {
    $('.team a').on('click', function() { 
         var table = $(this).parent().parent().parent();
         table.append('<tr><td colspan="4">PROVA</td></tr>');
     });  
 }); 
</script>

Ciao.

[cassano]

ma var

p = $(this).parent();

non ottiene un riferimento alla cella (td) ?

[kikoweb]

si esatto! E invece io vorrei che lo scrivesse dopo il </tr>
Purtroppo nessuno di queste soluzioni mi è stato di aiuto :/

Ho appena risolto così:

  $('.team a').on('click', function() { 
         var p = $(this).parent().parent();
         p.after('<tr><td colspan="4">PROVA</td></tr>');
         return false;
            
     });

finalmente ci sono riuscito

[kikoweb]

Adesso ho un nuovo problema, come faccio ad avere un effetto "toggle"?
Cioè vorrei che al click del link si vede e poi scompare al secondo click. -.-"

[kikoweb]

Risolto anche questo problema... spero possa essere di aiuto per chi ne dovesse avere bisogno.

<script type="text/javascript"> 

$(document).ready(function() {

    $('.team a').on('click', function(e) {
         e.preventDefault(); 
         var p = $(this).parent().parent();
         var tr_id = 'team_info_'+p.attr('id');
         var tr_class = p.attr('class');
         if ($('#'+tr_id).length) {
         $('#'+tr_id).fadeToggle("slow", "linear");
         } else {
         p.after('<tr id="'+tr_id+'" class="'+tr_class+'"><td colspan="4">PROVA</td></tr>');
            return false;
        }
            
     });  
 }); 


</script>