Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Color table data background using a variable

    Hi, I'm trying to use javascript to change the color of the background cell in a table. Ie, between <td> and </td>.
    I can do this with text, but don't know how to fill the background - any help would be much appreciated. Here is my code for changing the color of the text.
    Code:
    <td>
    <script>
    var bg3=bg2+bg1;
    document.write(str.fontcolor(bg3));
    </script>
    </td>
    This delivers the following. What I'd like to do is color the background and not the text (preferably have no text and just a solid background color!

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    for some reason my image link isn't appearing.

    here is the link
    https://www.dropbox.com/s/eryljnikks...2014.48.20.png

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Your code does not help at all! What is b2? b1?
    Should not use document.write().
    Lastly your code just activates by it's self. The same effect as if you just programmed the back gound color in the HTML.

    For JS to work right you need to identify the table cell your changing and then use this:
    Code:
    <table border="1" id="myTable">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td bgcolor="#FF0000">January</td>
        <td bgcolor="#00FF00">$100</td>
      </tr>
    </table>
    <button onclick="alter();">change color</button>
    <script type="text/javascript">
    function alter(){
    
    document.getElementById('myTable').rows[1].cells[0].style.backgroundColor = "yellow";
    }
    </script>
    Evolution - The non-random survival of random variants.

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, bg1 and 2 are variables. The hex color is calculated from Lab value inputs and returned as a variable. I don't want any button clicks or it won't work.

    Basically it is a color list and I want to show an RGB preview of the color in the list.

    I have never used javascript before, but the bits I did get, I got from w3 schools.

    Do you know how to do this without a button? I have a hex color in a variable and want to use that to color up a cell in a list.

    Your help & patience is appreciated.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,964
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You have to post more code.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    This may be what you are looking for. You need to add an array of the named colors and put some code in to make the color the innerHTML of the td.

    PS: I can see that this isn't what you want, but you can still learn from it how to change the background color.
    Code:
    <!DOCTYPE html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <title>Color Table</title>
    <style type="text/css">
    body{margin:0 auto;width:50%;font-family:cursive:height: 100%;}
    div {background-color:tan;border:3px dotted #ff0000;padding:20px;margin-top:40px}
    td, th
    {
    background-color:yellow;
    width:240px;height:120px;
    text-align:center;
    font-size:32px;
    }
    </style>
    <script type="text/javascript">
    // Make the src of this script an array of the named colors.
    </script>
    </head>
    <body>
    <div>
    <table><tbody>
    <tr>
    <td>Red</td>
    <td>Green</td>
    <td>Blue</td>
    <td>Navy</td>
    </tr><tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr><tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr><tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody></table>
    </div>
    <script type="text/javascript">
    t=document. getElementsByTagName("td");
    l=t.length;
    for(i=0;i<l;i++)
    {
    // Add code here to assign the named colors to the innerHTML.
    t[i].onclick=function(){setColor(this)}
    }
    function setColor(T)
    {
    T.style.backgroundColor=T.innerHTML;
    }
    </script>
    </body>
    </html>
    Last edited by DrDOS; 09-19-2013 at 07:03 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Glenn, not sure what to post other than what I put at the beginning.
    my variable in that small bit of code returns a hex code (eg. #123abc) that then colors up the same code in that color. It writes it into a row in column of my table. What I want to do is instead of coloring the font, color the background.
    Is that not as easy as it sounds?

    here is the picture I was trying to attach earlier of the text colored from that small script.

    https://www.dropbox.com/s/eryljnikks...2014.48.20.png

  • #9
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, that is what I want in terms of the background being colored, but I don't want any clicking to activate.

    The code that I posted at the top has a variable which returns a hex color (eg. #123abc). I don't know what these colors will be, they get added by users to a brand library as Lab values and are re-calculated into hex codes.

    The small code at the top puts the hex code in the table data in the correct color. All I want to do, is instead of coloring the text, color the background between <td> and </td>, so that only one cell in row is colored.

    The only complication is that my color is a variable. Easy to do this with font color, but how do I do it to the background?

    Cheers

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,964
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Is this for a single cell in a table or for all the cells in a table?

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    @zibzab I gave you code that works. If you don't want clicking, take it out.
    Evolution - The non-random survival of random variants.

  • #12
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Sunfighter,
    I can see that some of the code might work, being new to javascript / coding, can you tell me how I can make this work so it colors all rows (in their different colours) but only in the 5th column / cell.

    Does that make sense - each row has a unique colour. Your script mentions a particular row, can you apply it to all rows in the table?

    excuse my lack of knowledge!

    Cheers

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    JS has to occur after the table is rendered in HTML.
    Arrays atart at 0 my for loop starts at 1 so zero element of array is blank.
    I am using a <thead> and a <tbody> so I just count the body.
    If I counted the entire table the rows would start at zero.
    You can make the array as large as you want. Loop only uses the number corresponding to the numbers of rows in <tbody>

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    td{
    	width: 50px;
    	height: 40px;
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <table id="myTable" border="1">
    <thead>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    </tr>
    <thead>
    <tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr><tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr><tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    
    <script type="text/javascript">
    var rows = document.getElementById('myTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
    var color_array = ['', 'yellow', '#ff0000', 'blue','green', 'gray' ];
    
    for (i=1;i<=rows;i++){
    	document.getElementById('myTable').rows[i].cells[4].style.backgroundColor = color_array[i];
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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