how to highlight cell

#11 (**permalink**) 10-19-2006

Suppose you created an array called $class_value. In each cell you had
something like this:

<td class = "<?php $class_value[{$_GET[5]}]" ?>" >

and the way you clicked on the cell sent a "GET" that set the value of
$class_value[{$_GET[5]}] to "current" and then you had a style named
..current that set the background to the color you want the current cell
to be. Each cell would have a different matched "get" index set in the
class php and the "get" that was sent so that only the array with the
index in that cell would be turned to "current.

At the beginning of the script you would reset the value of
$class_value before the "get" set it for the current cell.

I think something like that might work.

--Kenoli

toffee wrote:
> Hi all,
>
> I have a table with 12 cols and 10 rows. When a user clicks on a table cell;
> the page is refreshed and displays some data below the table dependant on
> whichever cell was selected.
> I would like to make it so that whichever cell was clicked; the background
> color is changed - so that when the user sees the data, (s)he can tell which
> cell it relates to.
>
> Does anyone know of a clever way to do this ?
> I'm afraid my creativity is running a bit dry on this one as the only
> working way i could come up with so far is to have an if statement before
> each table cell is created, which is long winded.
>
> kind regards
>
> T

#12 (**permalink**) 10-19-2006

ok toffee. here's the example script...sorry for the text wrapping. hth.

<?
$currentCell = $_REQUEST['currentCell'];

// setup stubbed records
$records = array();
for ($key = 0; $key < 10; $key++)
{
for ($i = 0; $i < 10; $i++)
{
$column = chr(65 + $i);
$records[$key][$column] = 'VALUE ' . $column;
$addendums[$key][$i] = 'ROW ' . $key . ' :: CELL ' . $column;
}
}

// set addendum text
$currentRow = floor($currentCell / 10);
$currentCell = $currentCell % 10;
$addendum = $addendums[$currentRow][$currentCell];

// output html
?>
<html>
<title>Cell Highlighting</title>
<style type="text/css">
a
{
color : #000060;
text-decoration : none;
white-space : nowrap;
}
a:active
{
color : #000060;
text-decoration : none;
}
a:link
{
color : #000060;
text-decoration : none;
}
a:visited
{
color : #000060;
text-decoration : none;
}
a:hover
{
color : 000060;
text-decoration : underline;
}
table
{
border-collapse : collapse;
border-padding : 2px;
border-width : 0px;
border-spacing : 0px;
}
td
{
background-color : #FFFFFF;
color : black;
font-family : verdana, tahoma, arial, 'times new
roman', sans-serif;
font-size : 8pt;
margin : 5px;
padding-left : 5px;
padding-right : 5px;
spacing : 0px;
text-align : left;
vertical-align : middle;
width : 100px;
}
th
{
background-color : lavender;
border-bottom : solid 1px lightsteelblue;
color : black;
font-family : verdana, tahoma, arial, 'times new
roman', sans-serif;
font-size : 8pt;
font-weight : bold;
margin : 5px;
padding-left : 5px;
padding-right : 5px;
text-align : left;
vertical-align : middle;
}
</style>
<body>
<table>
<?
$header = array_keys($records[0]);
echo '<th>' . implode('</th><th>', $header) . '</th>';
$index = 0;
foreach ($records as $row => $record)
{
?>
<tr>
<?
foreach ($record as $column => $value)
{
$backgroundColor = $row == $currentRow && $index == $currentCell ?
'#CCCCCC' : 'white';
$uri = '?currentCell=' . $index;
?>
<td style="background-color:<?= $backgroundColor ?>">
<a href="<?= $uri ?>" title="Click for description"><?= $value
?></a>
</td>
<?
$index++;
}
if ($row == $currentRow)
{
echo '</tr><tr>';
if ($currentCell > 0)
{
echo '<td colspan="' . $currentCell . '"> </td>';
}
echo '<td>' . $addendum . '</td>';
}
?>
</tr>
<?
}
?>
</body>
</html>

#13 (**permalink**) 10-19-2006

toffee wrote:
> thanks everyone for the suggestions and I didnt mean to start an
> argument :-/
>
> Steve - apologies for not making it clearer, but when a user clicks
> on a cell the page is indeed refreshed; i just wanted to be able to
> show which cell caused the refresh by highlighting it.

Well, let me say that first of all when displaying certain data above in a
table, on which the data below depends, I cannot imagine how it's not
possible to use a simple:

for(table_cells loop)}
$class = (selected) ? ' class="selected"':'';
echo "<td{$class}>".$some_value().'</td>';
}

But hey:

Requirements:
1. You buffer your table in variable $table, no direct output.
2. x- and y-coördinates are known.
3. No rowspan or colspan in sight.
4. Classnames are correctly quoted with "";
5. Attribut names or values never hold the invalid '>' (should he < if
desired).

Use only on own tables with ensured above properties.

Example, I'm not testing this, so there are possible type-errors:
---CSS---
td.higlight{
background-color: yellow;
}
---PHP---

$table = //the table as you made it.
$x = //the x coordinate
$y = //the y coordinate
$regex = '|(<table.*?)
((<tr[^>]*>.*?</tr>.*?){'.($y-1).'}) #all previous rows
((<td[^>]*>.*?</td>.*?){'.($x-1).'}) #all previous cells
<td #target cell
([^>])*? #random attributes
(\s*class="([^"])*")? #perhaps existing classvalue
([^>])*? #random attributes
>|six';
$table = preg_replace($regex,'$1$2$4<td$6 class="highlight $8"$9>',$table);

/x is underestimated in regexes :-)

--
Grtz,

Rik Wasmus

#14 (**permalink**) 10-19-2006

ooops. ;^)

only top row highlighted. i rushed without noticing prior to
posting...sorry. here's the correction:

<?
$currentCell = $_REQUEST['currentCell'];

// setup stubbed records
$records = array();
for ($key = 0; $key < 10; $key++)
{
for ($i = 0; $i < 10; $i++)
{
$column = chr(65 + $i);
$records[$key][$column] = 'VALUE ' . $column;
$addendums[$key][$i] = 'ROW ' . $key . ' :: CELL ' . $column;
}
}

// set addendum text
$selectedCell = $currentCell;
$columnCount = count(array_keys($records[0]));
$currentRow = floor($currentCell / $columnCount);
$currentCell = $currentCell % $columnCount;
$addendum = $addendums[$currentRow][$currentCell];

// output html
?>
<html>
<title>Cell Highlighting</title>
<style type="text/css">
a
{
color : #000060;
text-decoration : none;
white-space : nowrap;
}
a:active
{
color : #000060;
text-decoration : none;
}
a:link
{
color : #000060;
text-decoration : none;
}
a:visited
{
color : #000060;
text-decoration : none;
}
a:hover
{
color : 000060;
text-decoration : underline;
}
table
{
border-collapse : collapse;
border-padding : 2px;
border-width : 0px;
border-spacing : 0px;
}
td
{
background-color : #FFFFFF;
color : black;
font-family : verdana, tahoma, arial, 'times new
roman', sans-serif;
font-size : 8pt;
margin : 5px;
padding-left : 5px;
padding-right : 5px;
spacing : 0px;
text-align : left;
vertical-align : middle;
width : 100px;
}
th
{
background-color : lavender;
border-bottom : solid 1px lightsteelblue;
color : black;
font-family : verdana, tahoma, arial, 'times new
roman', sans-serif;
font-size : 8pt;
font-weight : bold;
margin : 5px;
padding-left : 5px;
padding-right : 5px;
text-align : left;
vertical-align : middle;
}
</style>
<body>
<table>
<?
$header = array_keys($records[0]);
echo '<th>' . implode('</th><th>', $header) . '</th>';
$index = 0;
foreach ($records as $row => $record)
{
?>
<tr>
<?
foreach ($record as $column => $value)
{
$backgroundColor = $index == $selectedCell ? '#CCCCCC' : 'white';
$uri = '?currentCell=' . $index;
?>
<td style="background-color:<?= $backgroundColor ?>">
<a href="<?= $uri ?>" title="Click for description"><?= $value
?></a>
</td>
<?
$index++;
}
if ($row == $currentRow)
{
echo '</tr><tr>';
if ($currentCell > 0)
{
echo '<td colspan="' . $currentCell . '"> </td>';
}
echo '<td>' . $addendum . '</td>';
}
?>
</tr>
<?
}
?>
</body>
</html>

#15 (**permalink**) 10-19-2006

I would highly reccomend using JavaScript, not php, for what you're
describing.

#16 (**permalink**) 10-19-2006

toffee schrieb:
> Steve - apologies for not making it clearer, but when a user clicks on a
> cell the page is indeed refreshed; i just wanted to be able to show which
> cell caused the refresh by highlighting it.

So you are actually submitting some info along with the refresh to tell
the script what data it has to display below the table. I assume that
this info is also available when generating the table cell - otherwise
you are not able to submit it at all. (An URL to your example would
actually be very helpful for clarifying what you actually want to do.)

Now I don't think that any X and Y values are needed. Let's assume the
info is an item number, then your table generation code will contain
something like this at the moment:

<?php foreach ($rows as $row) { ?>
<tr>
...
<td>
<a href="my_script.php?item_nr=<?php echo $row['item_nr']; ?>">
Click here for info about item nr. <?php echo $row['item_nr']; ?>
</a>
</td>
...
</tr>
<?php } ?>

In order to highlight the cell last clicked on, you evaluate the
transmitted info, and if it corresponds with the current item nr you
assign a class to the td:

<?php
foreach ($rows as $row) {
if (isset($_GET['item_nr']) && $_GET['item_nr'] == $row['item_nr'])
$class = 'highlight';
else
$class = 'standard';
?>
....
<td class="<?php echo $class; ?>">

Then you style the highlight class with CSS.

If you want to use Javascript instead, as many suggest, you should
consider to drop page refreshing at all by
- either outputting all info boxes in divs with display:none, and change
them to display_block when the cell is clicked
- or use Ajax to retrieve the info when the cell is clicked.

For both ways you can include changing the cell background in the
function that you call on Click. Both also need extra coding effort to
make the page useable for non-Javascript browsers.

--
Markus

#17 (**permalink**) 10-19-2006

toffee wrote:

> I have a table with 12 cols and 10 rows. When a user clicks on a table cell;
> the page is refreshed and displays some data below the table dependant on
> whichever cell was selected.
> I would like to make it so that whichever cell was clicked; the background
> color is changed - so that when the user sees the data, (s)he can tell which
> cell it relates to.
>
> Does anyone know of a clever way to do this ?
> I'm afraid my creativity is running a bit dry on this one as the only
> working way i could come up with so far is to have an if statement before
> each table cell is created, which is long winded.

PEAR::HTML_Table, and then whatever you click inside the cell needs
to carry some coordinates. After that, its a simple matter of:

$table = new HTML_Table(/*your parameters*/);
//...
$table->updateCellAttributes($x,$y,$attributes);

Other than that, its basically the same solution as the others
suggested without the muck of writing it yourself.

#18 (**permalink**) 10-24-2006

Marcin Dobrucki wrote:

>> Does anyone know of a clever way to do this ?
>> I'm afraid my creativity is running a bit dry on this one as the only
>> working way i could come up with so far is to have an if statement before
>> each table cell is created, which is long winded.
>
>
> PEAR::HTML_Table, and then whatever you click inside the cell needs to
> carry some coordinates. After that, its a simple matter of:

Okay, here is some proof-of-concept code to go with the suggestion
(you need PEAR::HTML_Page2 and PEAR::HTML_Table installed):

<?php
require_once('HTML/Page2.php'); // so that we don't need to echo
require_once('HTML/Table.php');

$p = new HTML_Page2();
$t = new HTML_Table(array("frame" => "border",
"rules"=>"all",
"cellpadding" => 10));
for ($i=0; $i<3; $i++) {
for ($j=0; $j<3; $j++) {
$t->setCellContents($i,$j,"<a
href=\"".$_SERVER["PHP_SELF"]."?x=$i&y=$j\">highlight</a>");
}
}

if (isset($_GET["x"])) {
$t->updateCellAttributes($_GET["x"], $_GET["y"],
array("bgcolor" => "pink"));
}

$p->addBodyContent($t);
$p->display();
?>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode