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,實際行數據的保存位置,描述數據的列(過去版本,當前版本,草稿等),以及特別是日期欄。這樣,您可以檢查並查看自上次刷新後是否進行了編輯,如果是,則返回一個新類或變量或其他內容來表明這一點。

如果你想要一個版本類型的選項,你可能需要添加一個列,說明哪個用戶最後編輯了信息,然後輸出結果,並提供覆蓋以後更改和事情的選項。