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

Question

Sir, There is one table with different colors. Under that second table suppose with 3 columns,3rows.

After clicking on the color i will click any cell in the below table.that color have to apply for that particular cell. It is like paint bucket. Can u tell me how to do this?

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/