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/

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

1 个答案: