如何将选定颜色应用于选定单元

Question

先生， 有一张表具有不同的颜色。 在第二张桌子下面，假设有3列，3行。

点击颜色后，我将点击下表中的任何单元格，该颜色必须适用于该特定单元格。它就像油漆桶。 你能告诉我如何做到这一点？

Answer 1

CSS：

td { 
    border:1px solid grey; 
    width:40px; 
    height:40px; 
    cursor:hand; 
    cursor:pointer; 
} 

HTML：

<table id='colors'><caption>Color source</caption><tbody></tbody></table> 
<br> 
<table id='3x3'> 
    <caption>Target</caption> 
    <tr><td/><td/><td/></tr> 
    <tr><td/><td/><td/></tr> 
    <tr><td/><td/><td/></tr> 
</table> 

SCRIPT：

function randColor() { 
    var str=Math.round(Math.random()*16777215).toString(16); 
    return "#000000".substr(0,7-str.length)+str; 
} 


var tableColors,table3x3; 
var selectedColor=null; 
window.onload=function() { 
    tableColors=document.getElementById('colors'); 
    table3x3=document.getElementById('3x3'); 
    // generating colors table 
    for(var r=0;r<5;r++) { 
     var tr=tableColors.tBodies[0].appendChild(document.createElement('tr')); 
     for(var c=0;c<8;c++) { 
      var td=tr.appendChild(document.createElement('td')); 
      td.style.backgroundColor=randColor(); 
     } 
    } 
    selectedColor=tableColors.rows[0].cells[0].style.backgroundColor; 
    // registering event handlers 
    if(window.addEventListener) { 
     tableColors.addEventListener('mousedown',selectColor,false); 
     table3x3.addEventListener('mousedown',applyColor,false); 
    } 
    else if(window.attachEvent) { 
     tableColors.attachEvent('mousedown',selectColor); 
     table3x3.attachEvent('mousedown',applyColor); 
    } 
} 

function selectColor(ev) { 
    var src=(ev=ev||event).target||ev.srcElement; 
    while(src!==tableColors&& 
      (!src.tagName||src.tagName.toUpperCase()!=='TD')) 
     src=src.parentNode; 
    if(src.tagName.toUpperCase()==='TD')selectedColor=src.style.backgroundColor; 
} 

function applyColor(ev) { 
    var src=(ev=ev||event).target||ev.srcElement; 
    while(src!==table3x3&& 
      (!src.tagName||src.tagName.toUpperCase()!=='TD')) 
     src=src.parentNode; 
    if(src.tagName.toUpperCase()==='TD')src.style.backgroundColor=selectedColor; 
} 

http://jsfiddle.net/cUHn7/