Results 1 to 10 of 10

Thread: Bgcolor of the cell changes on click and back

  1. #1
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Bgcolor of the cell changes on click and back

    Hello, I have been looking around internet and on the forum but could not found script that do exactly something like this:

    When I click on any cell on the table it changes color and it will be able to change many cells to new color. When I click again on the cell it changes back to its orginal color. And I would like it to check what color was before as there are already a few colors used in the cells.
    It would be best if it change CSS style.

    All scripts I have found in internet can change only color of one cell and when I click another the first one changes to its orginal color - and it shouldn't. Please help me! I reallly need it and I am not able to write it by myself...
    Last edited by KreCi; 07-29-2007 at 08:37 AM.

  2. #2
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have done it other way so nevermind...

  3. #3
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is a fairly simple script. Just put this in the head section of your page:

    <script type="text/javascript" language=javascript>
    function changeColor(cell)
    {
    color = cell.style.backgroundColor;
    if (color == "blue")
    {
    cell.style.backgroundColor = "yellow";
    }
    else if (color == "yellow")
    {
    cell.style.backgroundColor = "blue";
    }
    }
    </script>
    Change the yellow and blue with the colors of your choice.
    Finally put this in the <td> tag of each table cell you want to change:
    style = "background-color: blue" onMouseOver="changeColor(this)"
    hope this helps.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Amazinzay View Post
    This is a fairly simple script. Just put this in the head section of your page:

    Code:
    <script type="text/javascript" language=javascript>
    function changeColor(cell)
    {
    var color = cell.style.backgroundColor;
    if (color == "blue")
    {
    cell.style.backgroundColor = "yellow";
    }
    else if (color == "yellow")
    {
    cell.style.backgroundColor = "blue";
    }
    }
    </script>
    Change the yellow and blue with the colors of your choice.
    Finally put this in the <td> tag of each table cell you want to change:

    Code:
    style = "background-color: blue" onMouseOver="changeColor(this)"
    hope this helps.
    That won't work in some browsers because, even if you specify a color as hex, or its name, or by its RGB value, different browsers will store the value as they see fit. As a result, when you go to check what the color currently is, it often will not be 'yellow' or 'blue' or whatever you expected it to be.

    Notes: The language attribute has been deprecated, stop using it. You should formally declare all variables.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You can adapt this script of mine:
    Code:
      <script type="text/javascript">
        onload = function() {
          for(var i = 0, es = document.getElementsByTagName('td'), n = es.length, e = es[0]; i < n; e = es[++i]) {
            var m = e.className.match(/swap\((\w+),\s*(#?[\d\-]+)\)/);
            if(m)
              e['on' + m[1]] = (function(n) {
                return function() {
                  var s = this.style;
                  var oldclr = s.backgroundColor;
                  s.backgroundColor = n;
                  n = oldclr;
                };
              })(m[2]);
          }
          e = es = null;
        };
      </script>
    </head>
    Code:
    <td class="swap(click, yellow)" style="background-color: red;">
    It should work with #rgb, #rrggbb, and named colour notations, but not the rgb(rrr, ggg, bbb) notation.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think that will work, Twey. At least this doesn't (no error message, just didn't work):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script type="text/javascript">
        onload = function() {
          for(var i = 0, es = document.getElementsByTagName('span'), n = es.length, e = es[0]; i < n; e = es[++i]) {
            var m = e.className.match(/swap\((\w+),\s*(#?[\d\-]+)\)/);
            if(m)
              e['on' + m[1]] = (function(n) {
                return function() {
                  var s = this.style;
                  var oldclr = s.backgroundColor;
                  s.backgroundColor = n;
                  n = oldclr;
                };
              })(m[2]);
          }
          e = es = null;
        };
      </script>
    </head>
    <body>
    <span class="swap(click, yellow)" style="background-color: red;">Hey</span>
    </body>
    </html>
    I did change 'td' to 'span' in the script, so that shouldn't have made any difference though, I may have missed something.

    This works out well and should support any method of naming and/or setting the color that any modern browser supports:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    span {
    background-color:lightblue;
    }
    </style>
    <script type="text/javascript">
    function changeColor(el, clr){
    var id, f=changeColor, c='color', r='run';
    if(!el.id||!f[el.id+r]){
    id=f.ids[f.ids.length]=el.id=el.id? el.id : c+'$_'+r+f.ids.length;
    f[id+c]=el.style.backgroundColor;
    f[id+r]=1;
    }
    else{id=el.id;};
    el.style.backgroundColor=f[id+c]==el.style.backgroundColor? clr : f[id+c];
    }
    changeColor.ids=[];
    </script>
    </head>
    <body>
    <span onclick="changeColor(this, 'yellow')">Hey</span>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Really? The original worked, I must've mucked something up while adapting it. Oh well, John's will work OK, although it is rather ugly.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, beauty is in the eye of the beholder. Working does count for something though. Anyways, I like this version even better:

    Code:
    <script type="text/javascript">
    
    function chngBGclr(el, bgclr){
    var d=el.id, f=chngBGclr, c='backgroundColor', e=el.style;
    if(!f.ids){f.ids=1;};
    if(typeof f[d+c]=='undefined'){
    d=el.id=d? d : c+'$_'+[f.ids++];
    f[d+c]=e[c];
    }
    e[c]=f[d+c]==e[c]? bgclr : f[d+c];
    }
    
    </script>
    HTML Code:
    <td onclick="chngBGclr(this, 'yellow')">Hey</td>
    Last edited by jscheuer1; 07-30-2007 at 02:02 PM. Reason: reduce get id by element lookups
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    I don't like this ids thing. It shouldn't be necessary to keep track of IDs, and it's inefficient besides to keep looking things up with gEBI(). A closure is much neater even if we do want to keep using an inline onclick event rather than a class.

    I'd fix my code, but I'm too worn out today, I fear I'd break it even further.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There isn't a single getElementById, or ByTagName (for that matter) in my code. Once the id is ascertained or assigned, it becomes a prefix for a property of the function for each element. This is only used to store the the original backgroundColor setting for retrieval/comparison purposes. On subsequent runs, all that is done is to compare the original stored value with the current value, if equal, the value passed to the function is used to set the backgroundColor. If not, the stored value is used to set the backgroundColor.

    Added Later: The function did however have may more get id by element lookups than it needed. I've fixed that, and edited my previous post to reflect the changes.
    Last edited by jscheuer1; 07-30-2007 at 02:14 PM. Reason: Add Info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •