Как обновить ячейку таблицы с помощью javascript

Question

У меня есть таблица, показывающая цены на акции, но я бы хотел обновить цену акции автоматически на странице, не обновляя страницу. Я пробовал это

$(document).ready(function(){ 
    var updater = setTimeout(function(){ 
     $('.table #price').load('index.php', 'update=true'); 
    },6); 
}); 

Это похоже на работу, но оно помещает всю таблицу в ячейку. Я просто хочу обновить ценовую ячейку. Любая помощь будет оценена по мере того, как я новичок в JavaScript. Я также размещаю другие файлы здесь.

Это portfolio.php

<table class="table table-hover center-table table-bordered"> 
     <tr> 
     <th>Symbol</th> 
     <th>Name</th> 
     <th>Shares</th> 
     <th>Price</th> 
     <th>Total</th> 
     </tr> 
<?php foreach ($shares as $row): ?> 

     <tr> 
     <td><?= $row["symbol"]?></td> 
     <td><?= $row["name"]?></td> 
     <td><?= $row["shares"]?></td> 
     <td id="price">$<?= number_format($row["price"],2)?></td> 
     <td>$<?= number_format($row["total"],2)?></td> 
     </tr> 

<? endforeach ?> 

<tr> 
    <td>CASH</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>$<?= number_format($cash[0]["cash"], 2)?></td> 

</tr> 

</table> 

<script type="text/javascript" src="js/update.js" ></script> 

это index.php

<?php 

// configuration 
require("../includes/config.php"); 

//query user's portfolio 

$rows = query("SELECT * FROM shares WHERE id = ?", $_SESSION["id"]); 
$cash = query("SELECT cash FROM users WHERE id = ?", $_SESSION["id"]); 

    //create array to store the shares 
    $shares = []; 

    //for each of the user info 

    foreach($rows as $row){ 

     //lookup stock info 
     $stock = lookup($row["symbol"]); 
     if($stock !== false){ 

      $shares[] = [ 
       "name" => $stock["name"], 
       "price" => $stock["price"], 
       "shares" => $row["shares"], 
       "symbol" => $row["symbol"], 
       "total" => $row["shares"]*$stock["price"] 

      ]; 

     } 
    } 

// render portfolio 
render("portfolio.php", ["shares" => $shares,"cash" => $cash, "title" => "Portfolio"]); 
?> 

Answer 1

Ваш Javascript поставит весь результат в index.php в клетке, которая не то, что вы хотите. Вы должны изменить свою страницу php, чтобы отображать только те данные, которые вы хотите отобразить в ячейке.

Нечто подобное необходимо сделать трюк (изменить его, как вам нужно):

// ...code to calculate $price... 
if (isset($_GET['update'])){ 
    echo $price; 
    exit(); 
} 

PS: Вы можете также использовать другую PHP страницу, чтобы вернуть $ цена, которая может быть лучше, чем вызов index.php каждый раз, когда вы хотите обновить цену в Jquery

Answer 2

вы можете попросить AJAX вернуть только значение определенного DIV

$(document).ready(function(){ 
    var updater = setTimeout(function(){ 
     $('.table #price').load('index.php #price', 'update=true'); 
    },6); 
}); 

Примечание: на приведенном выше коде я предположил, что у наш index.php с параметром update = true также будет иметь ту же страницу индекса с обновленной ценой