Jquery comment ajouter +1 à un nombre dans un tableau

Question

Donc je génère une table avec php/mysql, et dans ce tableau sont des nombres dans les rangées. J'ai un bouton qui quand on clique, ajoute +1 à cette valeur numérique dans la base de données MySQL. Le problème est que je dois actualiser la page pour que le nouveau numéro apparaisse dans le tableau.

Je tente d'afficher le nouveau numéro immédiatement à travers une fonction sur le succès de l'événement de clic sur le bouton jquery. Donc, essentiellement, j'ai besoin d'identifier le nombre généré par HTML dans le tableau, puis ajouter +1 à celui-ci.

Le problème est, la table est générée avec un tandis que fonctionne en php, de sorte que chaque ligne obtient son propre ID à la volée.

Espérons que tout cela a du sens.

Voici mon code Jquery jusqu'à maintenant.

$('.upArrow').click(function(){ 
    //this is finding the uparrow button that adds +1 
    var row = $(this).attr('rowid'); 

    $.ajax({ 
    type: "GET", 
    url: "upArrow.php?id="+row, 
    cache: false, 
    async: false, 
    success: function(result){ 
    //this is tricky part, how do I select the displayed number part of the 
    // table, then Add 1? 

    }, 
    error: function(result){ 
     alert('Error, please try again.'); 
    } 
    }); 
}); 

Edit: Voici un morceau de ma table HTML:

<td id="musicDisplay" colspan="2"> 

    <div id="newUpArrow"> 
     <a href="javascript:void(0)" class = "upArrow" 
     rowid="' . $row['id'] . '"><img src="../Img/upArrow.gif"/> 
      </a> </div> 

    <!--Here is the number I want to change.--> 
    <div>'. $row['points'] . '</div> 
</td> 

Answer 1

En théorie, vous voulez définir le contexte de votre demande ajax à l'élément contenant le texte que vous voulez . Ensuite, en cas de succès, vous augmenteriez le nombre dans ce contexte.

$.ajax({ 
    /* everything else as before */ 
    context: $('selector for element containing number to increase'), 
    success: function(result) { 
     $(this).html(parseInt($(this).html(), 10) + 1); 
    } 
}); 

Cela suppose que le contenu de l'élément de contexte sera toujours un seul entier

Si vous devez sélectionner une cellule par sa colonne et ligne, vous pouvez effectuer les opérations suivantes:

var column = 1; 
    var row = 1; 

    var $cell = $('table tr:eq(' + row + ') td:eq(' + column + ')'); 

    $cell.html(parseInt($cell.html(), 10) + 1); 

Voir violon: http://jsfiddle.net/xixionia/4HLp9/

Altho ugh, vous devrez changer "table" à l'id d'une table, sinon vous finirez par sélectionner toutes les cellules de toutes les tables à cette ligne et colonne.

Remarque: Après avoir vu votre code HTML, nous serions en mesure de fournir une description beaucoup plus détaillée de la façon de sélectionner la cellule souhaitée.

Answer 2

Combien de lignes avez-vous? Il peut être utile de recréer la table à partir de l'appel AJAX et de recharger le fichier html.