Jump to content

Formating Table To Display Data In A Chessboard-Like Pattern

josephbupe

By josephbupe
in HTML Help

 Share

Recommended Posts

codefossa Member

codefossa

Posted
Posted

You would be better off with DIV's than a table. A parent div containing the smaller ones floated. As you create them you can do whatever you'd like with them and you can make the pattern you're trying for.

 

Also, if you're creating a JS chess/checkers game, this would easily make the elements draggable and find their dropped location if all of the DIV's are the same size.

Link to comment
Share on other sites
codefossa Member

codefossa

Posted
Posted

Here's an example of what I was talking about, using jQuery.

Demo: http://xaotique.no-ip.org/tmp/22/

 

Javascript / jQuery

$(document).ready(function()
{
   var tileSize  = 100;
   var gridSize  = [ 8, 8 ];
   var gridColor = [ "#EFEFEF", "#000000" ];
   var container = $("body:first");

   var board = $(document.createElement("div")).css(
   {
       width: gridSize[0] * tileSize,
       height: gridSize[1] * tileSize,
       margin: "0px auto",
       border: "2px solid black"
   });

   container.append(board);

   for (var i = 0, tiles = gridSize[0] * gridSize[1]; i < tiles; i++)
   {
       var bgcolor = i % 2 == 0 ? gridColor[1] : gridColor[0];

       if (Math.floor(i / gridSize[0]) % 2 == 0)
           bgcolor = bgcolor == gridColor[0] ? gridColor[1] : gridColor[0];

       var tile = $(document.createElement("div")).css(
       {
           float: "left",
           width: tileSize,
           height: tileSize,
           "background-color": bgcolor
       });

       board.append(tile);
   }
});

Link to comment
Share on other sites
josephbupe Member

josephbupe

Posted
  • Author
Posted

Hi Xaotique,

 

Thank you so much for your suggestions. However, I do not understand jQuery and I was hoping for something simple like what Suraj at http://www.weberdev.com/get_example.php3?ExampleID=4406 has demostrated in the details page "showreprt1.php".

 

I tried it but only getting a single record listed in the table of results even when I have more than one records meeting the criteria.

 

What could I be missing to show results in columns than rows?

 

Here is my code:

 

<?php ini_set( 'error_reporting', E_ALL ^ E_NOTICE );?>
<?php ini_set( 'display_errors', '0' );?>
<?
include("includes/conn.php");
$mtitle=$_POST["mtitle"];
$myear=$_POST["myear"];
$mcountry=$_POST["mcountry"];
$mactors=$_POST["mactors"];
$o=$_POST["o"];
 $rest="";
 $text="Search Keywords : ";

  if($mtitle!="")
  {
   if($rest=="")
   {
  $rest.="where mtitle='$mtitle' ";
  $text.="Movie Title = $mtitle";
   }
   else
   {
   $rest.=" $o mtitle='$mtitle' ";
   $text.=", Movie Title = $mtitle";
   }
  }

   if($myear!="")
  {
   if($rest=="")
   {
  $rest.="where myear = '$myear' ";
  $text.="Year = $myear ";
   }
   else
   {
  $rest.=" $o  myear = '$myear' ";
  $text.=", Year = $myear ";
   }
  }

  if($mcountry!="")
  {
   if($rest=="")
   {
   $rest.="where mcountry = '$mcountry' ";
   $text.="Country = $mcountry";
   }
   else
   {
   $rest.=" $o  mcountry = '$mcountry' ";
   $text.=", Country = $mcountry";
   }
  }
  if($mactors!="")
  {
   if($rest=="")
   {
   $rest.="where mactors = '$mactors' ";
   $text.="Actor = $mactors";
   }
   else
   {
   $rest.=" $o  mactors = '$mactors' ";
   $text.=", Actor = $mactors";
   }
  }

 if($rest!="")
 {
 $rest=$rest;
 }
 else
 {
  //die("Enter Search Parameter<br><br><br><br><br><br><br><br><br><br><br>");
 }
$sql="select * from $db_name $rest order by mtitle";
$result=mysql_query($sql) or die(mysql_error());  
$num=mysql_num_rows($result);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Wlink Employee Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../script.js"> </script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="775" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

 <tr>
   <td><hr size="1" noshade></td>
 </tr>
 <tr>
   <td>
  <table width="750" border="0" align="center" cellpadding="2" cellspacing="2">
    <tr>
	  <td align="left">
<?
echo "<div align=right>$text</div>";
echo "<table width=700 border=0 cellpadding=0 cellspacing=0 align=center>\n
<tr>\n
<td> Total No of Records Found: $num   \n
<td>  \n

</tr>\n
<tr> \n";
$counter=0;
while($row=mysql_fetch_array($result))
{
$sn=$row['m_id'];
$mtitle=$row['mtitle'];
$myear=$row['myear'];
$mgenres=$row['mgenres'];
$mactors=$row['mactors'];
$mcountry=$row['mcountry'];
$mfilename=$row['mfilename'];
}

if($counter>=0) {
echo "<td valign=top>\n
<table width=340 border=1 align=left class=allborder> \n
<tr> \n
	 <td width=120> Title:  <td>$mtitle\n
</tr>\n
 <tr> \n
 <td> Year:  <td> $myear\n
</tr>\n
 <tr> \n
 <td> Genres:  <td> $mgenres\n
</tr>\n
 <tr> \n
 <td> Actors:  <td> $mactors\n
</tr>\n
</tr>\n
 <tr> \n
 <td> Country:  <td> $mcountry\n
</tr>\n
 <tr> \n
 <td> Poster:  <td><img src=\"./images/{$row['mfilename']}\" width=\"90\" height=\"120\" alt=\"\" /> \n
 </td>
</tr>\n
 <tr> \n
 <td colspan=2 class=topBorder> <a href=viewdetail.php?sn=$sn>View Detail Info</a>\n
</tr>\n
</table>\n</td>\n
 ";
 $counter++;
 }
 if($counter==2) {
  echo "</tr>\n<tr>\n<td colspn=2>  \n</tr>\n<tr>\n";
 $counter=0;
 }

echo "</table>\n";
?></td>
    </tr>
   </table></td>
 </tr>
</table>
</body>
</html>

Link to comment
Share on other sites
josephbupe Member

josephbupe

Posted
  • Author
Posted

Hi,

 

I am glad to report that I was able to fix the problem and achieve what I wanted.

 

screenshort.jpg

 

However, I have another problem with how to count the content and create a paginating. The code I am trying to adopt counts queries arranged in rows but seems not to count the content in my query, which is chessboard-like pattern.

 

Please, see my complete code:

 

<?php ini_set( 'error_reporting', E_ALL ^ E_NOTICE );?>
<?php ini_set( 'display_errors', '0' );?>
<?
@ $rpp;  //Records Per Page
@ $cps;  //Current Page Starting row number
@ $lps;  //Last Page Starting row number
@ $a;  //will be used to print the starting row number that is shown in the page
@ $b;   //will be used to print the ending row number that is shown in the page
?>
<?
include("includes/conn.php");
$mtitle=$_POST["mtitle"];
$myear=$_POST["myear"];
$mcountry=$_POST["mcountry"];
$mactors=$_POST["mactors"];
$o=$_POST["o"];
 $rest="";
 $text="Search Keywords : ";

  if($mtitle!="")
  {
   if($rest=="")
   {
    $rest.="where mtitle='$mtitle' ";
    $text.="Movie Title = $mtitle";
   }
   else
   {
   $rest.=" $o mtitle='$mtitle' ";
   $text.=", Movie Title = $mtitle";
   }
  }

   if($myear!="")
  {
   if($rest=="")
   {
    $rest.="where myear = '$myear' ";
    $text.="Year = $myear ";
   }
   else
   {
   $rest.=" $o  myear = '$myear' ";
   $text.=", Year = $myear ";
   }
  }

  if($mcountry!="")
  {
   if($rest=="")
   {
    $rest.="where mcountry = '$mcountry' ";
    $text.="Country = $mcountry";
   }
   else
   {
   $rest.=" $o  mcountry = '$mcountry' ";
   $text.=", Country = $mcountry";
   }
  }
  if($mactors!="")
  {
   if($rest=="")
   {
    $rest.="where mactors = '$mactors' ";
    $text.="Actor = $mactors";
   }
   else
   {
   $rest.=" $o  mactors = '$mactors' ";
   $text.=", Actor = $mactors";
   }
  }

 if($rest!="")
 {
 $rest=$rest;
 }
 else
 {
  //die("Enter Search Parameter<br><br><br><br><br><br><br><br><br><br><br>");
 }
$sql="select * from $db_name $rest order by mtitle";
$result=mysql_query($sql) or die(mysql_error());  
$num=mysql_num_rows($result);
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to make sure when the page is loaded for the
//first time, Current Page's Starting row number is 0, i.e. 1st row from the
//table is being printed. It will change as the user will click on next.
/////////////////////////////////////////////////////////////////////////////////
if(empty($_GET["cps"]))
{
 $cps = "0";
}
else
{
 $cps = $_GET["cps"];
}
/////////////////////////////////////////////////////////////////////////////////
$a = $cps+1;
$rpp = "10";
$lps = $cps - $rpp; //Calculating the starting row number for previous page
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to make sure whether a link to Previous page is
//needed or not. If the user is viewing the first set of data then the link will
//be disabled, if on the next set then it will carry the $lps in its link and
//enable the link
if ($cps <> 0)
{
 $prv =  "<a href='paging.php?cps=$lps'>Previous</a>";
}
else
{
 $prv =  "<font color='cccccc'>Previous</font>";
}
/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//Following SQL Statement uses SQL_CALC_FOUND_ROWS function to calculate total
//number of rows found by the query excluding the limit function added at the
//end of the SQL statement. This is followed by second query with FOUND_ROWS()
//function which actually gives out the number of rows found.
/////////////////////////////////////////////////////////////////////////////////
$q="Select SQL_CALC_FOUND_ROWS * from paging limit $cps, $rpp";
$rs=mysql_query($q) or die(mysql_error());
$nr = mysql_num_rows($rs); //Number of rows found with LIMIT in action
$q0="Select FOUND_ROWS()";
$rs0=mysql_query($q0) or die(mysql_error());
$row0=mysql_fetch_array($rs0);
$nr0 = $row0["FOUND_ROWS()"]; //Number of rows found without LIMIT in action
/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to determine whether the user has reached the
//last page of the records. For example, if we have 27 rows to print and we show
//10 rows per page, then on the third and the last page it will show seven rows
//and will say at the top that SHOWING RECORDS FROM 21 to 27. If the following
//validator is not used then it shows SHOWING RECORDS FROM 21 to 30.
/////////////////////////////////////////////////////////////////////////////////
if (($nr0 < 10) || ($nr < 10))
{
 $b = $nr0;
}
else
{
 $b = ($cps) + $rpp;
}
/////////////////////////////////////////////////////////////////////////////////
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Wlink Employee Details</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../script.js"> </script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="800" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
 <tr>
   <td>
  <table width="750" border="0" align="left" cellpadding="2" cellspacing="2">
    <tr>
	  <td align="left">
<?
echo "<div align=right>$text</div>";
echo "<table width=700 border=0 cellpadding=0 cellspacing=0 align=left>\n
<tr>\n
<td> Total No of Records Found: $num   \n
<td>  \n

</tr>\n
<tr> \n";
$counter=0;
while($row=mysql_fetch_array($result))
{
$sn=$row['m_id'];
$mtitle=$row['mtitle'];
$mfilename=$row['mfilename'];

if($counter>=0) {
echo "<td valign=top>\n
<table width=150 border=1 align=left class=allborder> \n
<tr> \n
 <td width=70>$mtitle\n
</tr>\n
 <tr> \n
 <td><img src=\"./images/{$row['mfilename']}\" width=\"90\" height=\"120\" alt=\"\" /> \n
 </td>
</tr>\n
 <tr> \n
 <td colspan=2 class=topBorder> <a href=viewdetail.php?sn=$sn>View Detail Info</a>\n
</tr>\n
</table>\n</td>\n
 ";
 $counter++;
 }
 if($counter==5) {
  echo "</tr>\n<tr>\n<td colspn=2>  \n</tr>\n<tr>\n";
 $counter=0;
 }
} 
echo "</table>\n";
?></td>
    </tr>
 <tr><td>
 <?
  {
 /////////////////////////////////////////////////////////////////////////////////
 //This is used to show the serial number on the page as well as to count it up
 //so that we can get the next page's starting row number when it exits the while
 //loop after fullfilling the above SQL criteria.
 /////////////////////////////////////////////////////////////////////////////////
 $cps = $cps +1;
 $val=$row["mfilename"];
 echo "<tr><td align='center'><font face=verdana>$cps</font></td><td align='center'><font fave=verdana>$val</font></td></tr>"; 
}

echo "<tr><td align='right' colspan=2>$prv";

/////////////////////////////////////////////////////////////////////////////////
//Following IF Statement is used to determine whether the Next link will be
//enabled or disabled. If the user has reached the last page of the record, then
//the Next link will be disabled.
/////////////////////////////////////////////////////////////////////////////////
if ($cps == $nr0)
{ 
 echo "  |  <font color='CCCCCC'>Next</font>";
}
else
{
 if ($nr0 > 5)
 {
  echo "  |  <a href='select.php?cps=$cps&lps=$lps'>Next</a>";
 }
}
/////////////////////////////////////////////////////////////////////////////////
?>
</td></tr>
   </table></td>
 </tr>
</table>
</body>
</html>

 

Any thoughts will be appreciated.

 

Regards.

 

Joseph

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.