Results 1 to 4 of 4

Thread: td background

  1. #1
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default td background

    Hi,

    How can I get td's background-color and write it on a specific text field, while clicking on it?

    Thank you

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there lord22,

    have a look at this example it may help...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #mytable {
        border:2px solid #999;
        margin:auto;
     }
    #mytable td {
        width:100px;
        height:62px;
        border:1px solid #666;
        text-align:center;
        cursor:pointer;
     }
    #td1 {
        background-color:#fcc;
     }
    #td2 {
        background-color:#cfc;
     }
    #td3 {
        background-color:#ccf;
     }
    #color {
        display:block;
        width:320px;
        border:3px double #999;
        margin:10px auto;
        text-align:center;
     }
    </style>
    
    <script type="text/javascript">
    if(window.addEventListener){
       window.addEventListener('load',mytest,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',mytest);
      }
     }
    
    function mytest(){
       tds=document.getElementById('mytable').getElementsByTagName('td');
    for(c=0;c<tds.length;c++) {
       tds[c].onclick=function() {
    if(this.currentStyle) {
       bgColor=this.currentStyle.backgroundColor;
       document.getElementById('color').value=
       'td id="'+this.id+'"  background-color="'+bgColor+'"';
     }
    else{
       compStyle=getComputedStyle(this,'');
       bgColor=compStyle.getPropertyValue('background-color');
       document.getElementById('color').value=
       'td id="'+this.id+'"  background-color="'+bgColor+'"';
        }
       }
      }
     }
    </script>
    
    </head>
    <body>
    
    <table id="mytable"><tr>
    <td id="td1">one</td>
    <td id="td2">two</td>
    <td id="td3">three</td>
    </tr></table>
    
    <div>
    <input id="color" type="text">
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Jul 2008
    Posts
    81
    Thanks
    38
    Thanked 2 Times in 2 Posts

    Default

    Thank you!
    Last edited by lord22; 08-23-2009 at 09:47 PM.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    No problem, you're very welcome.

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
  •