get color code when select the table cell.

rshekhar21 · 02-19-2013, 09:12 AM

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"> </td>
<td height="40" bgcolor="#B2E6F9"> </td>
<td height="40" bgcolor="#D9FCEA"> </td>
<td height="40" bgcolor="#00CCFF"> </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

coothead · 02-19-2013, 01:38 PM

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