javascript 每 x 秒自动刷新 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18326612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto Refresh HTML Table every x seconds
提问by nigel
I am attempting to refresh a table i have as the variables in there are constantly updated and i want to re-update those variable every few seconds. I have already done up code on my part by giving the table an id and creating a div for it. The code will explain what i actually. Thanks in Advance ! Added Var Table ,Var Refresher, table id is tableID . however the code still wont reload my table !Any ideas??
我正在尝试刷新我的表，因为那里的变量不断更新，我想每隔几秒钟重新更新一次这些变量。我已经通过给表一个 id 并为它创建一个 div 来完成我的代码。代码将解释我实际上是什么。提前致谢 ！添加了 Var Table ，Var Refresher，表 id 是 tableID 。但是代码仍然不会重新加载我的表！有任何想法吗？？
Test.php
测试文件
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
var table = $('#tableID');
// refresh every 5 seconds
// var refresher = setInterval(function() { table.load("refreshable"); }, 5000);
var refresher = setInterval(table.load.bind(table, "refreshable.php"), 5000);
//var refresh = setInterval($("#tableID")).load('refreshable.php'),3000);
setInterval(function() {
clearInterval(refresher);
}, 1800000);
</script>
</head>
<body>
<div id="tableID">
<?php include_once'refreshable.php'; ?>
</div>
</body>
</html>
refreshable.php
可刷新的.php
<?php
require_once 'connect.php';
include 'start.php';
include 'functions.php';
header("Cache-Control: no-cache,no-store");
$query = "SELECT * FROM opentrades"; //You don't need a ; like you do in SQL
$result = mysql_query($query);
echo "<table border = '1px' >"; // start a table tag in the HTML
echo "<tr><td>" . "Order Number" . "</td><td>" . "Selection" . "</td><td>" . "Date" . "</td><td>" . "Type" . "</td><td>" . "Size" . "</td><td>" . "Bid Price" . "</td><td>" . "Offer Price" . "</td><td>" ."Stop Loss" . "</td><td>" . "Take Profit" . "</td><td>" ."Profit/Loss(USD)"."</td><td>" ."Close"."</td></tr>" ; //$row['index'] the index here is a field name
while($row = mysql_fetch_assoc($result)){ //Creates a loop to loop through results
if ($row['selection']=='eur/usd')// TO RETRIEVE BID AND OFFER FOR EACH ROW
{
$bidpricepl=$bid;
$offerpricepl=$bid1;
}
elseif ($row['selection']=='usd/jpy')
{
$bidpricepl=$bid2;
$offerpricepl=$bid3;
}
elseif ($row['selection']=='usd/cad')
{
$bidpricepl=$bid4;
$offerpricepl=$bid5;
}
elseif ($row['selection']=='eur/jpy')
{
$bidpricepl=$bid6;
$offerpricepl=$bid7;
}
elseif ($row['selection']=='eur/chf')
{
$bidpricepl=$bid8;
$offerpricepl=$bid9;
}
elseif ($row['selection']=='gbp/usd')
{
$bidpricepl=$bid10;
$offerpricepl=$bid11;
}
elseif ($row['selection']=='aud/usd')
{
$bidpricepl=$bid12;
$offerpricepl=$bid13;
}
elseif ($row['selection']=='usd/chf')
{
$bidpricepl=$bid14;
$offerpricepl=$bid15;
}
if ($row['type']=="buy")
{
$minipipskiller='10';
$offeropen=$row['offerprice'];
$pips=$offerpricepl-$offeropen;
$closedb=$offeropen;
$pips1=round($pips, 6);
$pips2 = str_replace('.', '', $pips1);
if ($pips2<0)
{
$pips2 = str_replace('-', '', $pips2);
$pips2 = ltrim($pips2, '0');
$pips2 = -1 * abs($pips2);
}
else {
$pips2 = ltrim($pips2, '0');
}
$pips3=$pips2/$minipipskiller;
}// PIP COUNTING
elseif ($row['type']=="sell")//FOR PIP COUNTING
{
$minipipskiller='10';
$bidopen=$row['bidprice'];
$pips=$bidopen-$bidpricepl;
$closedb=$bidopen;
$pips1=round($pips, 6);
$pips2 = str_replace('.', '', $pips1);
if ($pips2<0)
{
$pips2 = str_replace('-', '', $pips2);
$pips2 = ltrim($pips2, '0');
$pips2 = -1 * abs($pips2);
}
else {
$pips2 = ltrim($pips2, '0');
}
$pips3=$pips2/$minipipskiller;
}
$ticksize= "0.0001";// FOR PROFIT AND LOSS
$lot1 = "100000";
$sizecalc=$row['size'] * $lot1;
if ($row['type']=="buy")
{
$profitandloss=$sizecalc*$ticksize*$pips3; //per TRADE
}
if ($row['type']=="sell")
{
$profitandloss=$sizecalc*$ticksize*$pips3; //per TRADE
}
$zero= '0';
if($profitandloss<$zero) {
$profitText = "<div style=\"color: red;\">$profitandloss</div>";
} elseif ($profitandloss>$zero) {
$profitText = "<div style=\"color: green;\">$profitandloss</div>";
}
$sum+= $profitandloss;
echo "<tr><td>" . $row['trade_id'] .
"</td><td>" . $row['selection'] .
"</td><td>" . $row['date'] .
"</td><td>" . $row['type'] .
"</td><td>" . $row['size'] .
"</td><td>" . $row['bidprice'] .
"</td><td>" . $row['offerprice'] .
"</td><td>" . $row['stoploss'] .
"</td><td>" . $row['takeprofit'] .
"</td><td>" . $profitText .
"</td><td><a href ='delete.php?id=".
$row['trade_id']."'>X</a>
</td></tr>";
$profitandloss=0;
if($sum<$zero) {
$sumText = "<div style=\"color: red;\">$sum</div>";
} elseif ($sum>$zero) {
$sumText = "<div style=\"color: green;\">$sum</div>";
}
}
echo "</table><br>";
?>
采纳答案by HMR
As Ajelandro pointed out in the comment you could try to fill a div with the refreshable table:
正如 Ajelandro 在评论中指出的那样，您可以尝试使用可刷新表填充 div：
I've moved the script and added doctype (html5)
我已经移动了脚本并添加了 doctype (html5)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>
</script>
</head>
<body>
<div id="tableID">
<?php include_once'refreshable.php'; ?>
</div>
<script type='text/javascript'>
var table = $('#tableID');
// refresh every 5 seconds
var refresher = setInterval(function(){
table.load("refreshable.php");
}, 5000);
setTimeout(function() {
clearInterval(refresher);
}, 1800000);
</script>
</body>
</html>
In your php remove the tableID:
在您的 php 中删除 tableID：
echo "<table border = '1px'>";
回答by Soosh
You can send AJAX request to refreshable.php and get back results and update your table like:
您可以将 AJAX 请求发送到 refreshable.php 并返回结果并更新您的表格，例如：
document.getElementById('id').innerHTML = AJAXResponse;
Here is an example:
下面是一个例子：
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
setInterval(function(){
var xmlhttpObserver;
if(window.XMLHttpRequest)
{
xmlhttpObserver = new XMLHttpRequest();
}
else
{
xmlhttpObserver = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpObserver.open("POST" , "chat.php" , true);
xmlhttpObserver.onreadystatechange = function()
{
if (xmlhttpObserver.readyState == 4)
{
if(xmlhttpObserver.status == 200)
{
if((xmlhttpObserver.response).length > 4)
{
responseArea.innerHTML += friendName + ": " + xmlhttpObserver.response;
}
}
else
{
//alert("Error during AJAX call. Please try again #002");
}
}
};
xmlhttpObserver.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttpObserver.send("sender=" + friendName + "&receiver=" + userName);
} ,6000);
Assume that we create these three variables befor:
假设我们创建这三个变量之前：
responseArea , friendName , userName
I used this code to notify a user that a friend is online.
我使用此代码通知用户朋友在线。
回答by Ahsan Shah
There are couple of issues in your javascript code.
您的 javascript 代码中有几个问题。
The clearTimeout()method clears a timer set with the setTimeout()method.
该clearTimeout()方法清除使用该setTimeout()方法设置的计时器。
use clearInterval(refresher)instead.
使用clearInterval(refresher)来代替。
