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页面返回$ price，这可能比每次要更新价格时调用index.php更好

Answer 2

在Jquery中你可以要求AJAX返回唯一的某个div的值

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

注意：在上面的代码中，我假设你的index.php与update = true参数也将具有相同的索引页面，价格更新

如何使用javascript刷新表格单元格

2 个答案: