copy td background color and set div to the color when clicked

Question

How can i take the bgcolor and title of a td and then set a div to that color and write out the title next to the div

<div id="boxcolor1">change color</div><div id="boxtext1">write td title here</div>


<table id="box1"><tr><td title="Maroon" bgcolor="#5A0014"></td></tr></table>

I'm sure it's possible but i can't see it working for me......

Thanks

Answer 1

Try this jquery code

$("#box1 tr td").bind("click",function(){         
       $("#boxtext1").html($(this).attr("title"));
       $("#boxcolor1").css("background-color",$(this).attr("bgcolor"));
});

Here, we are looping through each td, and whenever user clicks on any td, we are reading its title and bgcolor attributes and setting it to given divs appropriately.

Answer 2

$("table#box1 tr td').click(function(){
   var bgcolor = $(this).attr("bgcolor");
   var title   = $(this).attr("title");
   $("boxcolor1").css("background-color",bgcolor);
   $("boxtext1").html(title);
})

Happy coding

Answer 3

Working Demo

Here you have it:

var cell=$("table#box1 tr td:first");
var title=cell.attr("title");
var color=cell.attr("bgcolor");

$("#boxcolor1").css({"background":color});
$("#boxtext1").text(title);