473,513 Members | 4,753 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how to highlight cell

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
Oct 18 '06 #1
17 3356
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
Long winded indeed.

The only other option I can think of at the moment is keeping an array
for each cell as X,Y coordinates, and the value of the array element
would be a string like 'style="background-color:#CCCCCC;"'. Then just
reference array location for each cell and output the contents. If it
is empty, fine, but if you assign a string like that, the color will
change.

Both solutions require you to put code at each cell though...
I've never figured out any way around it.

Ex:
<?
$cellStyles = array();
$cellStyles[1][0] = 'style="background-color:#CCCCCC;"';
?>

<table>
<tr>
<td <?=$cellStyles[0][0]?>>a</td>
<td <?=$cellStyles[1][0]?>>b</td>
</tr>
<tr>
<td <?=$cellStyles[0][1]?>>c</td>
<td <?=$cellStyles[1][1]?>>d</td>
</tr>
</table>

Oct 18 '06 #2
Hmm toffee <to****@toffee.comwrote:
Does anyone know of a clever way to do this ?
you can use css to show color on clicked cell - bkg color or bkg img but you
will have to remeber in script what cell was clicked
orter solution make make href and set visited option on your bkg color then
you no need script

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ikciu | gg: 718845 | yahoo: ikciu_irsa | www: www.e-irsa.pl

2be || !2be $this =mysql_query();
Oct 18 '06 #3
| Both solutions require you to put code at each cell though...
| I've never figured out any way around it.
|
| Ex:
| <?
| $cellStyles = array();
| $cellStyles[1][0] = 'style="background-color:#CCCCCC;"';
| ?>
|
| <table>
| <tr>
| <td <?=$cellStyles[0][0]?>>a</td>
| <td <?=$cellStyles[1][0]?>>b</td>
| </tr>
| <tr>
| <td <?=$cellStyles[0][1]?>>c</td>
| <td <?=$cellStyles[1][1]?>>d</td>
| </tr>
| </table>
perhaps this may be easier (if i understood you correctly):
<html>
<style type="text/css">
td
{
background-color : white;
cursor : pointer;
width : 50px;
}
</style>
<script type="text/javascript">
var currentCell;
function colorMe(el)
{
if (!el){ return; }
if (!el.style){ return; }
if (currentCell){ currentCell.style.backgroundColor = ''; }
currentCell = el;
currentCell.style.backgroundColor = '#CCCCCC';
}
</script>
<body>
<table>
<tr>
<td onclick="colorMe(this);">a</td>
<td onclick="colorMe(this);">b</td>
</tr>
<tr>
<td onclick="colorMe(this);">c</td>
<td onclick="colorMe(this);">d</td>
</tr>
</table>
<body>
<html>
Oct 18 '06 #4
Hmm Steve <no****@example.comwrote:
perhaps this may be easier (if i understood you correctly):
nope :) he wrote about refresh, and what if some1 block js?

--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ikciu | gg: 718845 | yahoo: ikciu_irsa | www: www.e-irsa.pl

2be || !2be $this =mysql_query();
Oct 18 '06 #5

".:[ ikciu ]:." <no@mail.comwrote in message
news:eh**********@news.dialog.net.pl...
| Hmm Steve <no****@example.comwrote:
| perhaps this may be easier (if i understood you correctly):
|
| nope :) he wrote about refresh, and what if some1 block js?

if you're going to ridicule me again, but in this thread now, i suggest that
you learn to COMPREHEND english!!! unless you want me to embarrass you
again. in case you missed it, the OP spoke of MANY things...but THIS is his
question:

<quote>
I would like to make it so that whichever cell was clicked; the background
color is changed
</quote>

so yes, my example does EXACTLY that...fucking moron!
Oct 18 '06 #6
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.

kind regards

T

"Steve" <no****@example.comwrote in message
news:Ac***************@newsfe07.lga...
>
".:[ ikciu ]:." <no@mail.comwrote in message
news:eh**********@news.dialog.net.pl...
| Hmm Steve <no****@example.comwrote:
| perhaps this may be easier (if i understood you correctly):
|
| nope :) he wrote about refresh, and what if some1 block js?

if you're going to ridicule me again, but in this thread now, i suggest
that
you learn to COMPREHEND english!!! unless you want me to embarrass you
again. in case you missed it, the OP spoke of MANY things...but THIS is
his
question:

<quote>
I would like to make it so that whichever cell was clicked; the background
color is changed
</quote>

so yes, my example does EXACTLY that...fucking moron!


Oct 18 '06 #7
Don't worry about those 2 arguing. They seem to be like the Odd Couple.
I've watched them bicker through 2 threads already within the past 24
hours. Wish they could just all get along...or take it outside...or
something.

As long as you get your solution, this ng proves its worth.

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.

kind regards

T

"Steve" <no****@example.comwrote in message
news:Ac***************@newsfe07.lga...
>".:[ ikciu ]:." <no@mail.comwrote in message
news:eh**********@news.dialog.net.pl...
| Hmm Steve <no****@example.comwrote:
| perhaps this may be easier (if i understood you correctly):
|
| nope :) he wrote about refresh, and what if some1 block js?

if you're going to ridicule me again, but in this thread now, i suggest
that
>you learn to COMPREHEND english!!! unless you want me to embarrass you
again. in case you missed it, the OP spoke of MANY things...but THIS is
his
>question:

<quote>
I would like to make it so that whichever cell was clicked; the background
color is changed
</quote>

so yes, my example does EXACTLY that...fucking moron!


Oct 18 '06 #8

"toffee" <to****@toffee.comwrote in message
news:eh**********@news.freedom2surf.net...
| 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.
|
| kind regards
|
| T

very good. i actually posted that so you'd flesh out how you wanted the
refresh to run. one way is to use javascript and populate all the data
needed for all the cells and just hide that data in a div in the
html...getting it via js would allow you one trip to the server without the
refresh. as it is, i see you intend not to use js. the solution is fairly
simple...i'll work up a quick example and post it here.

cheers
Oct 19 '06 #9

"Breklin" <br*****@sbcglobal.netwrote in message
news:1y******************@newssvr13.news.prodigy.c om...
| Don't worry about those 2 arguing. They seem to be like the Odd Couple.
| I've watched them bicker through 2 threads already within the past 24
| hours. Wish they could just all get along...or take it outside...or
| something.

lol. it does seem that way, doesn't it. i've got him plonked so i won't see
further posts.

l8r
Oct 19 '06 #10
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
Oct 19 '06 #11
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 . '">&nbsp;</td>';
}
echo '<td>' . $addendum . '</td>';
}
?>
</tr>
<?
}
?>
</body>
</html>
Oct 19 '06 #12
Rik
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 &lt; 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
Oct 19 '06 #13
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 . '">&nbsp;</td>';
}
echo '<td>' . $addendum . '</td>';
}
?>
</tr>
<?
}
?>
</body>
</html>
Oct 19 '06 #14
I would highly reccomend using JavaScript, not php, for what you're
describing.

Oct 19 '06 #15
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
Oct 19 '06 #16
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.
Oct 19 '06 #17
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();
?>
Oct 24 '06 #18

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
4980
by: Gerg | last post by:
The datagrid has a tablestyle applied to it, and there are DataGridTextBoxColumn and each DataGridTextBoxColumn has an array of DataGridTextBox objects. Private Sub highlight(ByVal str As...
2
4902
by: J Krugman | last post by:
I have set up an HTML table with clickable cells (the cells contain only text). They work fine, but I would like to give the user some visual feedback to indicate that a cell has been clicked. ...
11
4328
by: VK | last post by:
Hi, I'm playing around with tables (TOM vs. DOM etc.) I cannot figure out an effective highlight mechanics for the cells: 1) No problems with: <td ...onMouseOver/Out background change> some...
1
5265
by: Michael Ramey | last post by:
I'm using the following code to highlight the current row: private void Datagrid1_CurrentCellChanged(object sender, System.EventArgs e) { DataGrid1.Select(DataGrid1.CurrentRowIndex); } The...
2
1605
by: Geraldine Hobley | last post by:
Hello I have a datagrid, called MyDataGrid and I wish to put the focus on a particular cell in order that the user to highlight the fact that the user needs to enter a value in this cell, e.g. I put...
0
1903
by: Islandbuoy | last post by:
Hi all, A VB learner on the loose here - keen as mustard but thoroughly confused !! I wish to change both the Interior Colour Index & Font Colour Index in a specific cell when that cell only is...
2
2156
cassbiz
by: cassbiz | last post by:
The output I am receiving is not highlighting all of the contents just part. in the below code @line 21 if a certain variable is met I want the cell highlighted. The problem is in the output it...
5
2698
by: Dave | last post by:
Is there a way to selectively highlight text in an OverLib popup? I'd like to be able to make some text stand out from the rest of the text that is displayed. I tried using a one-cell table with...
1
2536
by: dixonjm | last post by:
Hi, I am adding a table dynamically using c# as below:- productCell = new TableCell(); KSSCheckBox checkBox = new KSSCheckBox(); checkBox.ID = string.Format("CheckBox|{0}|{1}", x,...
0
7432
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7094
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7519
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5677
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5079
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4743
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3230
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3218
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
796
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.