我有一个从mysql表中提取数据的php文件（myphpfile.php）。 我有一个带有Jquery加载的html文件（good.html），它将php文件嵌入到容器中。
当数据大于包装器的高度时，我想开始慢慢滚动表格然后淡出回到表格的顶行并继续循环。
我认为没有计算高度，因为在加载php页面之前包装器是空的。 所以，请帮忙。我该如何做到这一点。
<?php
$host = "localhost";
$user = "my user";
$pass = "my pass";
$databaseName = "somedatabase";
$tableName = "variables";
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query("SELECT * FROM $tableName"); //query
$array = mysql_fetch_row($result); //fetch result
//--------------------------------------------------------------------------
// 3) echo result as json
//--------------------------------------------------------------------------
//echo json_encode($array);
// Begin your table outside of the array
echo "<div class='main-container'>";
echo "<div class='row-header'>";
echo "<div class='data-cell cell-header'>Event Name</div><div class='data-cell cell-header'>Event Location</div><div class='data-cell cell-header'>Start Time</div><div class='data-cell cell-header'>End Time</div>";
echo "</div>";
//echo "<table width=100% border=0 cellpadding=4 cellspacing=0>";
//echo"<th class=\"th1\"><a href=\"admin\" target=\"_blank\">TODAY'S EVENTS</a></th><th class=\"th2\">EVENT LOCATION</th><th class=\"th3\">STARTING</th><th class=\"th4\">ENDING</th>";
// Define your colors for the alternating rows
$color1 = "#e4dad2";
$color2 = "#efeae6";
$row_count = 0;
date("Y/m/d");
$today = date("m/d/Y");
//$today = date("F j, Y");
$date=(Date("F j, Y")); // Date
// Perform an statndard SQL query:
$sql_events = mysql_query("SELECT * FROM $tableName ORDER BY event_date DESC") or die (mysql_error());
//$sql_events = mysql_query("SELECT * FROM $tableName WHERE event_date='" .$today."' ORDER BY event_date ASC, start_time_part ASC, start_time_hr ASC, //start_time_mn DESC") or die (mysql_error());
// We are going to use the "$row" method for this query. This is just my preference.
while ($row = mysql_fetch_array($sql_events)) {
$event_date = $row["event_date"];
$event_title = $row["name"];
$event_location = $row["event_location"];
$event_start_hr = $row["start_time_hr"];
$event_start_mn = $row["start_time_mn"];
$event_start_ampm = $row["start_time_part"];
$event_end_hr = $row["end_time_hr"];
$event_end_mn = $row["end_time_mn"];
$event_end_ampm = $row["end_time_part"];
/* Now we do this small line which is basically going to tell
PHP to alternate the colors between the two colors we defined above. */
$row_color = ($row_count % 2) ? $color1 : $color2;
// Echo your table row and table data that you want to be looped over and over here.
echo "<div class='data-row'>";
echo "<div class='data-cell cell1'>$event_title</div>";
echo "<div class='data-cell cell2'>$event_location</div>";
echo "<div class='data-cell cell3'>$event_start_hr : $event_start_mn $event_start_ampm</div>";
echo "<div class='data-cell cell4'>$event_end_hr : $event_end_mn $event_end_ampm</div>";
echo "</div>";
// echo "<tr>";
// echo"<td class=\"td1\" bgcolor=$row_color><b>$event_title</b></td>";
// echo"<td class=\"td2\" bgcolor=$row_color><b>$event_location</b></td>";
// echo"<td class=\"td3\" bgcolor=$row_color><b>$event_start_hr : $event_start_mn $event_start_ampm</b></td>";
// echo"<td class=\"td4\" bgcolor=$row_color><b>$event_end_hr : $event_end_mn $event_end_ampm</b></td>";//
// echo "</tr>";
// Add 1 to the row count
$row_count++;
}
// Close out your table.
//echo "</table>";
echo "</div>";
// close connection
mysql_close();
?>
和我的Jquery的Html页面是这个
<html>
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<style type="text/css">body {
background-color:#f9f9f9;
font-family: 'Roboto', sans-serif;
font-size:12px;
line-height:15px;
}
.wrapper {
max-width:1200px;
margin:1em auto;
background-color:#fff;
border:1px solid #ddd;
box-shadow:0px 0px 6px #eee;
}
#load_updates {
position:relative;
width:800px;
height:400px;
overflow:hidden;
margin:4em 0 4em 2em;
}
.main-container {
display:table;
min-height:300px;
width:100%;
}
.row-header {
font-weight:700;
background-color:#444;
color:#f9f9f9;
text-shadow:1px 1px 1px #000;
font-size:1.3em;
display:table-row;
float:none;
min-height:1.8em;
padding:.2em 0;
width:100%;
}
.data-row {
display:table-row;
float:none;
border-bottom:1px dotted #ddd;
min-height:1.8em;
padding:.2em 0;
width:100%;
}
.data-row {
font-size:1.3em;
}
.data-row:nth-child(even) {
background-color:#efefef;}
}
.data-row:nth-child(odd) {
background-color:#f4f4f4;}
.data-row:after {
display:table;
float:none;
width:100%;
height:0;}
.data-cell {
display:table-cell;
float:left;
text-align:left;
padding:.5em .6em;
width:22.5%;
}
#tb {
height:auto;}
#tb table {
min-height:300px;
}
.cell-header {
}
.ts {border:1px solid #ddd;}
</style>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$("#tb").load("myphpfile.php").fadeIn("slow");
}, 1800); // refresh every 1800 milliseconds
</script>
</head>
<body>
<div class="wrapper">
<div id="load_updates">
<div class="ts" id="tb"></div>
</div>
<div id="load_heights"></div>
<script>
<div id="result"> </div>
<script>
</script></div>
<script type="text/javascript">
jQuery.fn.myFunction = function() {
var boxhigh = jQuery("#load_updates").height();
var tbhigh = jQuery("#tb").height();
var differencehigh = tbhigh - boxhigh;
if (differencehigh > 0) {
$(this).css("color", "red");
$(this).animate({ "top": "-=160" }, 10000 );
$("#load_heights")( "innerHeight:" );;
return true;
}
};
$("#tb").myFunction();
</script><script>
$.get( "myphpfile.php", function( data ) {
$( "#result" ).html(data);
});
</script></body>
</html>