How to loop through and write to table cell

Question

I am trying to write write a stock price to a table cell. Right now it is going through the loop and just writing the last price. I want to write the price to each #price cell in the table. This is what I have:

$(document).ready(function(){

  var updater = setTimeout(function(){
      $.ajax({  
        url: '../html/update.php',  
        success: function(data) { 
          var resp = jQuery.parseJSON(data); 
          var len = resp.price.length;

          for(var i=0; i<len; i++){

                  $('#price').html(resp.price[i].price);

          }
        }
      });
  },60);

});

<?php foreach ($shares as $row): ?>

        <tr >
        <td><?php echo $row["symbol"];?></td>
        <td><a href="extended_info.php?id=<?=$row["symbol"]?>"><?php echo $row["name"];?></a></td>
        <td style="text-align: right;"><?php echo $row["shares"];?></td>
        <td id="price" style="text-align: right;">$ </td>
        <td style="text-align: right;"><?php 
        $change = number_format($row["change"],2);
        echo sprintf( "%+1.2f", $change );
        echo "   ( ";
        echo $row["pct"]; 
        echo "   )";
        ?></td>
        <td style="text-align: right;">$ <?php echo number_format($row["dayGain"],2);?>  </td>    
        <td style="text-align: right;">$ <?php echo number_format($row["total"],2);?></td>
        </tr>

<?php endforeach; ?>

Answer 1

You need to identify the correct table row to update for each row of the update.php's reply.

Try this in your JavaScript:

$('[data-symbol="'+resp.price[i].symbol+'"]').html(resp.price[i].price);

And this in PHP:

<td data-symbol="<?=$row['symbol']?>" style="text-align: right;">$ </td>

Assuming each share's symbol is unique, you will be able to identify the correct table cell to update with the share's price. Also, using the data-* attributes keeps your markup standard-compliant.

Answer 2

Because you have set an id="price" like this:

<td id="price" style="text-align: right;">$ </td>

each iteration of the for-loop (in jQuery-part) sets the value for the same element all the time (and this is the last element in the dom). This is because id="price" is not unique and jQuery choses that the last element in the dom with this id is considered unique.

As I see it there are two solutions to this:

First: "Convert id="price" to an array* so you can iterate through each item in the array. You do this by adding brackets to the id price, like this: id="price[]". But there is another issue with this. Id's in html are considered to be unqiue and this is not the case here. You could give the element a name instead, like this name="price[]".

Short version, change line to:

<td name="price[]" style="text-align: right;">$ </td>

In the jQuery you then iterate through the array and set values accordingly.

Second: Id's are unique and classes don't have to be, therefore change id to class like this: id="price" to class="price". You could do this as long as you don't have any other element in html that has the name price.

Short verison, change line to:

<td class="price" style="text-align: right;">$ </td>

In the jQuery you then iterate through elements with classname price and set values accordingly.