Manipuler des données de ligne avec Javascript

Question

J'ai une question spécifique, j'ai un lien dans un tableau dans la troisième colonne de chaque ligne, quand l'utilisateur clique sur ce lien, il charge un ajax et met à jour la page, ce que je veux aussi arriver est-ce que dans la 2ème colonne de la ligne où se trouve le lien, changez la classe de td de false à true, et la valeur de No à Yes.

Merci!

Mettre à jour! Exemple de code:

La 2ème colonne n'est toujours pas mise à jour lors du clic, peut-être parce que le div où se trouve la table est masqué onclick? Quoi qu'il en soit, voici ce que j'ai essayé:

<tr> 
    <td>00839</td> 
    <td class="false" style="text-align:left;">No</td> 
    <td>  
    <a href="#" 
     onclick="Element.hide('ajax-instruction-view');; 
     new Ajax.Updater('ajax-instruction-view', '/tasks/show_ajax/839', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Appear(&quot;ajax-instruction-view&quot;,{});window.scrollTo(0,0); 
     link = $(link); 
     var row = link.up('tr'); 
     var cell = row.down('td').next('td'); 
     cell.update('Yes');}, 
     parameters: 'authenticity_token='encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=')}); return false;" 
    > 
     Instructions-Notice Board 
    </a> 
    </td> 
    <td>19/04/10</td> 
    <td class="false">21/04/10</td> 
    <td class="false" style="text-align:left;">None.</td> 
</tr> 

Answer 1

Il On dirait qu'à un certain moment, vous avez une référence au lien sur lequel l'utilisateur a cliqué (soit parce que vous avez un gestionnaire click, soit parce que vous utilisez la délégation d'événement et que vous la trouvez après un clic sur la table). En commençant par une référence à ce lien, vous pouvez utiliser des trucs traversal DOM Prototype pour trouver la seconde cellule de table:

Modifier En fonction de votre réponse à Rahul, je changerais votre lien onclick à:

onclick="handleLinkClick(this); return false;" 

... et ce serait handleLinkClick:

function handleLinkClick(link) { 

    // Original code (mostly unchanged) 
    Element.hide('currentdiv'); 
    new Ajax.Updater('someajax', 'ajax.html', { 
     asynchronous:true, 
     evalScripts:true, 
     onComplete: function(request) { 
      new Effect.Appear("newdiv",{}); 
      window.scrollTo(0,0); 

      // New code starts here 

      // Extend the link element 
      link = $(link); 

      // Find the row 
      var row = link.up('tr'); 

      // Find the second column 
      var cell = row.down('td').next('td'); 

      // Change the cell's "class" and "value" -- I've had to guess a bit at 
      // what you want to do here 
      if (cell.hasClassName("true")) { 
       cell.removeClassName("true").addClassName("false"); 
       cell.update("No"); 
      } 
      else { 
       cell.removeClassName("false").addClassName("true"); 
       cell.update("Yes"); 
      } 

      // End of new code 
     }, 
     parameters:'authenticity_token=' + encodeURIComponent('SYWsdBTWlz17u9HmPXA2R9WmBfZn67g/IAMGyhHEwXw=') 
    }); 

} 

qui utilise le Element#up, Element#next, Element#hasClassName, Element#addClassName, Element#removeClassName, et ; docs pour eux here.

choses option à considérer:

• Ce qui précède est fragile en ce que si vous modifiez l'emplacement de cette cellule (en faire la troisième colonne plutôt que la seconde), elle échoue. Vous pourriez utiliser une classe de marqueur pour le trouver. Au lieu d'un attribut onclick, vous pouvez utiliser Element#observe.
• Vous pouvez utiliser la délégation d'événements pour avoir un seul gestionnaire sur la table, plutôt qu'un gestionnaire sur chaque lien.

Mais ce qui précède devrait fonctionner.

Answer 2

Je ne me souviens comment écrire dans Scriptaculous mais jQuery ce serait:

$(element).click(function(){ 
    // invoke your ajax routine 

    // change class 
    $($(this).parent('tr').children().get(1)).attr('class', 'my-classname'); 
}); 

Peut-être que quelqu'un peut traduire :-)