2011-12-28 106 views
0

我使用PHP和MySQL从表中选择数据并将其显示在div中,而无需使用jQuery使用定时间隔刷新页面。我希望能够使行(或单个单元格)的背景颜色发生改变,数据在上次刷新后发生了变化。然后,如果用户点击行(或td),它应该变回CSS中定义的常规颜色。我猜我应该在PHP中使用会话变量来比较刷新之间的值,但我不明白PHP是如何与Javascript交谈的,因为他们是服务器/客户端技术。我找到了一个线程@http://www.codingforums.com/showthread.php?t=191813,其中一个人正在寻找做同样的事情,他想通了,但我不明白他的代码,它是好的和坏的代码片断。想知道是否有人能指出我正确的方向。谢谢。如何在数据更改时更改td或tr背景颜色

编辑:下面是调用PHP脚本来获取数据的页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<title>Tes View</title> 
<link rel="stylesheet" type="text/css" href="offtime3.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type='text/javascript'> 

$(document).ready(function(){ 
$("#container").load('dcviewQuery.php'); 
var timer = null, 
interval = 30000, 

timer = setInterval(function() { 
$("#container").fadeOut("slow").load('dcviewQuery.php').fadeIn("fast"); 
}, interval); 

$(".dcview").live("blur", (function() { 
if (timer !== null) return; 
timer = setInterval(function() { 

    $("#container").fadeOut("slow").load('dcviewQuery.php').fadeIn("fast"); 
}, interval); 
})); 

$(".dcview").live("focus", (function() { 
clearInterval(timer); 
timer = null 
})); 

$.ajaxSetup({ cache: false });  

}); 

</script> 
</head> 
<body> 
<form action="viewajax-exec.php" method="post"> 
<div id="container"></div> 

<input type="submit" value="Update" name="submit" /> 

</form> 
</body> 
</html> 

这里是dcView.php的代码,即从表中抓取的数据位

$query="SELECT pID, fname, lname, offTime, pickUpTime, notes FROM mytable WHERE status <> 'Inactive' ORDER BY offTime"; 
$result=mysql_query($query) or die(mysql_error()); 
$num=mysql_numrows($result); 
if($result) 
{ 
if(mysql_num_rows($result) > 0) 
{ 
    echo "<table><tr>"; 
    echo "<th id=\"fname\">F. Name</th><th id=\"lname\">L. Name</th><th id=\"date\">Date</th><th id=\"offtime\">Off Time</th><th id=\"pickup\">Pick Up Time</th><th id=\"notes\">Notes</th><th id=\"status\">Comp?</th>"; 
    echo "</tr>\n"; 
    $num = 0; 
    $i = 0; 
    while($row = mysql_fetch_array($result)) 
    { 
     $pid = $row['pID']; 
     $tmptime1 = strtotime($row['pickUpTime']); 
     $tmptime2 = strtotime($row['offTime']); 
     $mydate = date("m-d-Y", $tmptime1); 
     $cjdate = date("Y-m-d", $tmptime2); 
     $putime = date("H:i", $tmptime1); 
     $offtime = date("H:i", $tmptime2); 
     $num++; 
     if ($odd = $num%2) 
     { 
      echo "<tr class=\"odd\">"; 
     } 
     else 
     { 
      echo "<tr class=\"even\">"; 
     } 
     echo "<input name=\"pid[]\" type=\"hidden\" value=\"$pid\" />"; 
     echo "<input name=\"jdate[]\" type=\"hidden\" value=\"$cjdate\" />"; 
     ?> 
     <td id="fname" class="dcview"><?php echo $row['fname'];?></td> 
     <td id="lname" class="dcview"><?php echo $row['lname'];?></td> 
     <td id="date" class="dcview"><?php echo $mydate;?></td> 
     <td id="offtime" class="dcview"><input type="text" size="4" name="offtime[]" value="<?php echo $offtime;?>" /></td> 
     <td id="pickup" class="dcview"><?php echo $putime;?></td> 
     <td id="notes" class="dcview"><textarea rows="1" cols="15" name="notes[]" wrap="physical"><?php echo $row['notes'];?></textarea></td> 
     <td id="status" class="dcview"><input type="checkbox" name="status[]" value="Inactive" /> 
     <?php 
     ++$i; 
     echo "</tr>\n"; 

     } 

     echo "</table>\n"; 
     exit(); 
    } 
    else 
    { 
     //Search failed 

    } 
} 
else 
{ 
    die("Query failed"); 
} 

?> 

我想你可以忽略调用viewajax-exec.php的提交按钮,因为该脚本更新数据库中的数据,但我一直无法弄清楚如何在不刷新的情况下将数据发送到服务器整个页面(但这是以后的另一个问题)。我拿出了所有使用会话变量的临时代码,因为我试图找出哪些标记被设置为什么。

+1

请提供一些代码或您正在使用的标记 – Rafay 2011-12-28 04:24:17

+0

如何更新表格?完成擦拭和重新显示?更新各个单元格/行?你如何跟踪发生了什么变化? – mrtsherman 2011-12-28 04:32:06

回答

0

如果您正在更改多个行和单元格,您可以随时说出该项目何时失焦,请检查以前的值(来自数据库)是否等于单元格的当前值。如果不同,请将CSS设置为不同的颜色。

var id; 
$(":input").focus(function() { 
id = this.id;}); 

$(":input").blur(function() { 
if this.id <> id 
    //Call an update 
}); 
0

我的解决办法是这样的:

index.php 
    ajax.js 
    script.js 
    result.php 

index.php 包含您的HTML,并遍历,以创建表元素从result.php获得的结果。

ajax.js 以设定的时间间隔从result.php请求新的结果。将结果与index.php的DOM中的数据进行比较,如果有更改,则会更新表格,并将updated类别指派给更新的项目。

script.js 还有一些JS,其中包含一个处理程序,用于点击类别为updated的项目。

result.php JSON或其他一些可被PHP和JS消化的格式的结果列表。

如果你给我们更多的细节,我们可以添加更多的解释。

0

如果没有看到您正在使用的代码或您想要完成的代码,确实很难确切地说出您需要的内容。

这听起来像你正在寻找某种类型的股票代码?或者,您可能希望用户查看是否有其他人在编辑完成后编辑了表格?

尽管如此,

在任何情况下,这听起来像你需要在你的数据库中的一些版本控制,如果你希望与任何可扩展性来复制此。尝试制作版本表并保持数据简单,例如数据表的关系ID,实际行数据的保存位置,描述数据的列(过去版本,当前版本,草稿等),以及特别是日期栏。这样,您可以检查并查看自上次刷新后是否进行了编辑,如果是,则返回一个新类或变量或其他内容来表明这一点。

如果你想要一个版本类型的选项,你可能需要添加一个列,说明哪个用户最后编辑了信息,然后输出结果,并提供覆盖以后更改和事情的选项。