Jump to content

Recommended Posts

I always wanted to create an "SPREADSHEET" looking display from queries returns. I created this using HTML/PHP/CSS. It does not contain any JS.

A. I would like to know about the general asthetics of the display
B. I would like any suggesitons for improvements.

Please keep in mind, this is created dynamically, as the post below shows.

Things I don't know how to do (yet) would be:

How to center text in an <input type="text"> cell
User Resizable Cells
User Resizable Table
Ability to select specific cells
and the big one:
It would be really cool if the ENTIRE contents of the cell would display in a popup/balloon when you hover (or perhaps click) over a cell.

Here is the link:
[a href=\"http://baptistrevival.com:8081/test/divtable.php\" target=\"_blank\"]http://baptistrevival.com:8081/test/divtable.php[/a]
Here is the code:
[code]
<style>
table, tr, th, td {
border-collapse: collapse;
text-align:center;
margin:0;
padding:0;
width: 100%;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
}
INPUT{
  MARGIN:0PX;
  PADDING:0PX;
  font-family:TrebuchetMS;
  font-size:10pt;
  font-weight:bold;
  background-color:#ffffff;
  border-color:#C0C0C0;
  border-style:RIDGE;
  border-width:1px;
}
INPUT.label{
    background-color:#e0e0e0;
    }
body
  {
   scrollbar-base-color: #FFFFFF;
   scrollbar-arrow-color: #808080;
   scrollbar-darkshadow-color: #c0c0c0;
   scrollbar-face-color: #FFFFFF;
   scrollbar-highlight-color: #c0c0c0;
   scrollbar-shadow-color: #c0c0c0;
   scrollbar-3dlight-color: #ffffff;
background-color: #ffffff;}
</style>
<body>
<?
function col2str($a) {
    return ($a-->26?chr(($a/26+25)%26+ord('A')):'').chr($a%26+ord('A'));
    }
$i=1;
$n=1;
?>
<div style="border : solid 1px #000000; background : #c0c0c0; color : #ff0000; padding : 1px; width : 770px; height : 400px; overflow : auto; ">
<table WIDTH="100%">
<tr>
<TD><br/></TD>
<?php
while($i<9){
    $colname = col2str($i);
    echo '<TD WIDTH="10"><INPUT class="label"  SIZE="10"  TYPE="TEXT" VALUE="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$colname.'" readonly></TD>';
    $i++;
    }
?>
</TR>
<?php
$user="";
$host="localhost";
$password="";
$database = "bible";
mysql_connect($host,$user,$password);
mysql_select_db($database);
$result = mysql_query("SELECT * FROM Bible where book like 'Genesis' order by `key`");
while ($row=mysql_fetch_array($result)){
    echo '<tr>';
    echo '<TD WIDTH="10"><INPUT  SIZE="3"  TYPE="TEXT" VALUE="'.$n.'" class="label" readonly></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[0].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[1].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[2].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[3].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[4].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[5].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[6].'"></TD>';
    echo '<TD WIDTH="10"><INPUT  SIZE="10"  TYPE="TEXT" VALUE="'.$row[7].'"></TD>';
    echo '</tr>';
    $n++;
    }
?>
</table>
</div>
</body>
[/code]
Link to comment
https://forums.phpfreaks.com/topic/3657-need-a-critique-and-some-suggestions/
Share on other sites

I don't know JS at all...

If someone could give me a hint of how to make the cells resizable... that would be Great!

[!--quoteo(post=349815:date=Feb 27 2006, 08:29 AM:name=Javizy)--][div class=\'quotetop\']QUOTE(Javizy @ Feb 27 2006, 08:29 AM) [snapback]349815[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Looks okay, maybe you could use some graphics to give it the look and feel of a program like Excel.

You could use some js to allow resizing of cells and other features like that.
[/quote]
Hi,

Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.
If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.

For example a search in google for "javascript spreadsheet". The first result:
[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]

Cells can be resized etc.

Best of Luck,
-steve

P.S. if you want to know how to resize cells in javascript - look at the above one and study their code.
Thanks,

This is as much a Learning exercise as anything. I'll take your suggestion and pick their example apart.



[!--quoteo(post=349828:date=Feb 27 2006, 09:22 AM:name=steviewdr)--][div class=\'quotetop\']QUOTE(steviewdr @ Feb 27 2006, 09:22 AM) [snapback]349828[/snapback][/div][div class=\'quotemain\'][!--quotec--]

Hi,

Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.
If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.

For example a search in google for "javascript spreadsheet". The first result:
[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]

Cells can be resized etc.

Best of Luck,
-steve

P.S. if you want to know how to resize cells in javascript - look at the above one and study their code.
[/quote]
I'm sorry, I didn't realize I didn't add the limit ... I was going to...
[!--quoteo(post=350029:date=Feb 27 2006, 05:42 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Feb 27 2006, 05:42 PM) [snapback]350029[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Why did you put the contents of the ENTIRE BIBLE on a demonstration page? It takes an eternity and a half to load! Put a limit statement in your query or something!
[/quote]
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.

×
×
  • 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.