Question

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

编辑：以下是调用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的Submit按钮，因为该脚本更新了数据库中的数据，但是我还没弄清楚如何在不刷新数据的情况下将数据发送到服务器整页（但这是以后的另一个问题）。我拿出了所有使用会话变量的临时代码，因为我试图找出哪些标志被设置为什么。

Answer 1

如果要更改多个行和单元格，则可以始终说明项目失去焦点时，请检查以前的值（来自数据库）是否等于单元格的当前值。如果不同，则将css设置为不同的颜色。

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

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

Answer 2

我的解决方案是这样的：

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都可以理解的其他格式。

如果您向我们提供更多详细信息，我们可以添加更多解释。

Answer 3

如果没有看到您正在使用的任何代码或您想要完成的任务，确实很难准确说出您的需求。

听起来我觉得你在寻找某种自动收报机吗？或者您可能希望用户在编辑完成后查看其他人是否编辑了该表？

然而，

在任何情况下，如果您希望以任何可伸缩性复制它，听起来您需要在数据库中进行某些版本控制。尝试制作版本表并保持数据简单，例如数据表的关系ID，保存实际行数据的位置，描述该数据的列（过去版本，当前版本，草稿等），以及特别是日期栏。这样你可以查看自上次刷新以来是否已编辑，如果是，则返回一个新的类或变量或其他东西来表明这一点。

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

如何在数据更改时更改td或tr背景颜色

3 个答案: