Question

So I am generating a table with php/mysql, and in this table are numbers in rows. I have a button that when clicked, adds +1 to this number value in the MySQL database. The problem is, I have to refresh the page for the new number to show up in the table.

I am attempting to show the new number immediatly through a function on the success of the jquery button click event. So essentially I need to identify the HTML generated number in the table, then add +1 to it.

The problem is, the table is generated with a while function in php, so each row gets its own ID on the fly.

Hope this all makes sense.

Here is my Jquery code so far.

   $('.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: Here is a piece of my HTML table:

    <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

In theory, you’ll want to set the context of your ajax request to the element containing the text you want. Then on success, you would increase the number in that context.

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

This assumes that the content of the context element will always be a single integer

If you need to select a cell by it’s column and row, you could do the following:

    var column = 1;
    var row = 1;

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

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

See fiddle: http://jsfiddle.net/xixionia/4HLp9/

Although, you would need to change “table” to a table’s id, otherwise you’ll end up selecting all of the cells from every table at that row in and column.

Note: Having seen your html, we would be able to provide a much more detailed description of how to select the desired cell.