how to highlight cell

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • toffee

    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


  • Moot

    #2
    Re: how to highlight cell

    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="backgro und-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="backgro und-color:#CCCCCC;" ';
    ?>

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

    Comment

    • .:[ ikciu ]:.

      #3
      Re: how to highlight cell

      Hmm toffee <toffee@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();


      Comment

      • Steve

        #4
        Re: how to highlight cell

        | 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="backgro und-color:#CCCCCC;" ';
        | ?>
        |
        | <table>
        | <tr>
        | <td <?=$cellStyle s[0][0]?>>a</td>
        | <td <?=$cellStyle s[1][0]?>>b</td>
        | </tr>
        | <tr>
        | <td <?=$cellStyle s[0][1]?>>c</td>
        | <td <?=$cellStyle s[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.sty le.backgroundCo lor = ''; }
        currentCell = el;
        currentCell.sty le.backgroundCo lor = '#CCCCCC';
        }
        </script>
        <body>
        <table>
        <tr>
        <td onclick="colorM e(this);">a</td>
        <td onclick="colorM e(this);">b</td>
        </tr>
        <tr>
        <td onclick="colorM e(this);">c</td>
        <td onclick="colorM e(this);">d</td>
        </tr>
        </table>
        <body>
        <html>


        Comment

        • .:[ ikciu ]:.

          #5
          Re: how to highlight cell

          Hmm Steve <no.one@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();


          Comment

          • Steve

            #6
            Re: how to highlight cell


            ".:[ ikciu ]:." <no@mail.comwro te in message
            news:eh5qgm$3to $1@news.dialog. net.pl...
            | Hmm Steve <no.one@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!


            Comment

            • toffee

              #7
              Re: how to highlight cell

              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.one@example .comwrote in message
              news:AcuZg.532$ _z4.142@newsfe0 7.lga...
              >
              ".:[ ikciu ]:." <no@mail.comwro te in message
              news:eh5qgm$3to $1@news.dialog. net.pl...
              | Hmm Steve <no.one@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!
              >
              >

              Comment

              • Breklin

                #8
                Re: how to highlight cell

                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.one@example .comwrote in message
                news:AcuZg.532$ _z4.142@newsfe0 7.lga...
                >
                >".:[ ikciu ]:." <no@mail.comwro te in message
                >news:eh5qgm$3t o$1@news.dialog .net.pl...
                >| Hmm Steve <no.one@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!
                >>
                >>
                >>
                >
                >
                >

                Comment

                • Steve

                  #9
                  Re: how to highlight cell


                  "toffee" <toffee@toffee. comwrote in message
                  news:eh65mo$6g2 $1@news.freedom 2surf.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


                  Comment

                  • Steve

                    #10
                    Re: how to highlight cell


                    "Breklin" <breklin@sbcglo bal.netwrote in message
                    news:1yxZg.1608 9$e66.5994@news svr13.news.prod igy.com...
                    | 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


                    Comment

                    • kenoli

                      #11
                      Re: how to highlight cell

                      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

                      Comment

                      • Steve

                        #12
                        Re: how to highlight cell

                        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($currentC ell / 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($rec ords[0]);
                        echo '<th>' . implode('</th><th>', $header) . '</th>';
                        $index = 0;
                        foreach ($records as $row =$record)
                        {
                        ?>
                        <tr>
                        <?
                        foreach ($record as $column =$value)
                        {
                        $backgroundColo r = $row == $currentRow && $index == $currentCell ?
                        '#CCCCCC' : 'white';
                        $uri = '?currentCell=' . $index;
                        ?>
                        <td style="backgrou nd-color:<?= $backgroundColo r ?>">
                        <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>


                        Comment

                        • Rik

                          #13
                          Re: how to highlight cell

                          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($r egex,'$1$2$4<td $6 class="highligh t $8"$9>',$table) ;


                          /x is underestimated in regexes :-)

                          --
                          Grtz,

                          Rik Wasmus


                          Comment

                          • Steve

                            #14
                            Re: how to highlight cell

                            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_key s($records[0]));
                            $currentRow = floor($currentC ell / $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($rec ords[0]);
                            echo '<th>' . implode('</th><th>', $header) . '</th>';
                            $index = 0;
                            foreach ($records as $row =$record)
                            {
                            ?>
                            <tr>
                            <?
                            foreach ($record as $column =$value)
                            {
                            $backgroundColo r = $index == $selectedCell ? '#CCCCCC' : 'white';
                            $uri = '?currentCell=' . $index;
                            ?>
                            <td style="backgrou nd-color:<?= $backgroundColo r ?>">
                            <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>


                            Comment

                            • dimo414

                              #15
                              Re: how to highlight cell

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

                              Comment

                              Working...