The files are on the localhost so I will post the files here.
main file(function is called in the html page in an 'output-listings' div)
buy.function.php:
<?php
function outputListingsTable()
{
$mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
$result = $mysql->query("SELECT * FROM explore") or die($mysql->error);
if($result)
{
echo "<div class=\"main-info\"> \n";
echo "<table class=\"listings\"> \n";
echo "<tbody>";
while($row = $result->fetch_object())
{
$id = $row->id;
$siteName = $row->site_name;
$siteDescription = $row->site_description;
$siteURL = $row->site_url;
$sitePrice = $row->site_price;
echo " <tr id=\"info-" .$id. "\"> \n";
echo "<tr class=\"mi\"><td><div id=\"more-" .$id. "\" class=\"more-information\"> \n";
echo "</div></td></tr> \n";
echo " <td>" . $siteName . "</td> \n";
echo " <td>" . $siteURL . "</td> \n";
echo " <td><a id=\"" . $id . "\" class=\"more-info\" href=\"#\">More info</a></td> \n";
echo " </tr>";
}
echo "</tbody>";
echo "</table> \n";
echo "</div> \n";
}
}
?>
listing.js:
$(function(){
$("tr").hover(function(){
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
});
});
style.css:
tr.hover td { background: #FDFFE7; }
table { border-collapse:collapse;
color:#3F3F3F;
font-family:arial,helvetica,sans-serif;
border-top:1px solid #DFDFDF;
}
td.more-information { padding: 0px; }
div.more-information { display: none; }
