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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    get color code when select the table cell.

    sir,
    i have create a table and have filled the cell with different colors of my choice that i may use any time to decorate any webpage. i mean to say that i have created a color library in the form of table.

    now i need a function in jquery so that whenever i click on any cell it gives its color code in a separate input box place in my webpage.
    i am giving a brief description of my page so that you can understand to form the code for me.

    <html>
    <head>
    <script src="mini.js"></script>
    <script>
    //jquery code will go here
    $(document).ready(function(){
    //pleas write the code in this block

    });
    </script>
    </head>
    <body>
    <label for"cc">Color Code</label>
    <input type="text" name="cc" id="cc"/><br>
    <div id="color">
    <table width="100%" border="0" cellpadding="0" cellspacing="2">
    <tr>
    <td height="40" bgcolor="#0072C6">&nbsp;</td>
    <td height="40" bgcolor="#B2E6F9">&nbsp;</td>
    <td height="40" bgcolor="#D9FCEA">&nbsp;</td>
    <td height="40" bgcolor="#00CCFF">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    this is my html page format

    now i am not getting the way to use jquery to give me the code of my cell a a value in the input tag so that i can copy it to use it anywhere.


    sir would you mind giving me the code to use this function.

    i would be very grateful to you

    regards

    Raj Shekhar

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there rshekhar21,


    unfortunately for you, but fortunately for me, I don't do or know anything about "JQuery" other than the name.

    But if you are interested, I would code it like this...
    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=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>color code</title>
    
    <style type="text/css">
    body {
        min-width:315px;
     }
    #color {
        margin-bottom:10px;
        text-align:center;
     }
    #table1 {
        width:100%;
        border-spacing:2px;
     }
    #table1 td {
        height:40px;
        padding:0;
        cursor:pointer;
     }
    #table1 td:hover {
        box-shadow:inset 0 0 10px rgba(0,0,0,1.0);
     }
    </style>
    
    <script type="text/javascript">
    (function() {
       'use strict';
    
    function init(){
        var cells=document.getElementById('table1').getElementsByTagName('td');
    for(var c=0;c<cells.length;c++) {
     cells[c].onclick=function() {
       document.getElementById('cc').value=this.style.backgroundColor;
       }
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    
    </script>
    
    </head>
    <body>
    
    <form action="#">
    <div id="color">
     <label for="cc">Color Code</label>
     <input id="cc" type="text" readonly="readonly">
     <input type="reset" value="clear">
    </div>
    </form>
    
    <table id="table1"><tr>
     <td style="background-color:#0072c6">&nbsp;</td>
     <td style="background-color:#b2e6f9">&nbsp;</td>
     <td style="background-color:#d9fcea">&nbsp;</td>
     <td style="background-color:#00ccff">&nbsp;</td>
    </tr></table>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 02-19-2013 at 01:52 PM. Reason: added a hover effect, just to be a smart arse !!


  •  

    Posting Permissions

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