2011-12-28 9 views
0

PHPとMySQLを使用して、テーブルからデータを選択し、jQueryを使用してページを更新せずにdivで表示します。私は最後のリフレッシュ以降にデータが変更された行(または個々のセル)の背景色を変更できるようにしたいと思います。ユーザーが行(またはtd)をクリックすると、CSSで定義されている通常の色に戻ります。私はリフレッシュ間の値を比較するためにPHPでセッション変数を使うべきだと推測していますが、PHPがサーバ/クライアント技術であるためJavascriptとどう対話するのか分かりません。私は1つのスレッド@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を呼び出すSubmitボタンを無視することができます。そのスクリプトはデータベース内のデータを更新しますが、データをサーバーに送信する方法を把握することができませんでしたページ全体(しかしそれは後のもう一つの問題です)。セッション変数を使用した一時的なコードをすべて取り出しました。なぜなら、どのフラグが何に設定されているのか把握しようとしていたからです。

+1

作業中のコードまたはマークを入力してください – Rafay

+0

テーブルをどのように更新していますか?ワイプと再表示を完了しますか? invdividualセル/行を更新しますか?何が変わったのか、どうやって追跡していますか? – mrtsherman

答えて

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 は、あなたのテーブル要素を作成するためにresult.phpから得られた結果を通して、あなたのHTML、および繰り返し処理が含まれています。

ajax.js result.phpから新しい検索結果が設定されます。 DOM内のデータとindex.phpを比較し、変更がある場合は、updatedクラスを更新されたアイテムに割り当てるとともに、テーブルを更新します。

script.js さらにいくつかのJSは、クラスがupdatedのアイテムをクリックするハンドラを含みます。

result.php JSONまたはPHPとJSの両方で消化可能な他の形式の結果リスト。

さらに詳しい情報をお伝えいただければ、さらに説明を追加できます。

0

あなたが作業しているコードを見たり、何を達成したいのかわからなくても、あなたが必要とするものを正確に言うのは本当に難しいです。

ティッカーのようなものを探しているように私には聞こえますか?または、編集した後に他の誰かがテーブルを編集したかどうかをユーザーに見てもらうことができますか?

あなたが任意のスケーラビリティでこれを複製することを望む場合は、データベース内のいくつかのバージョン管理を必要とするようにそれにもかかわらず、いずれの場合においても

は、それが聞こえます。バージョンテーブルを作成し、データテーブルのリレーショナルID、実際の行データが保存されている場所、そのデータが何であるかを示す列(過去のバージョン、現在のバージョン、ドラフトなど)、特に日付の列。そうすれば、最後にリフレッシュしてから編集されたかどうかを確認して確認することができます。そうであれば、新しいクラスや変数などで返すことができます。

バージョンタイプのオプションを使用する場合は、どのユーザーが最後に情報を編集したかを示す列を追加し、結果を出力し、後で行った変更や変更を上書きするオプションを与える必要があります。