Duvida de evento em tabela via javascript

[shakall]

Olá pessoal!

Estou fazendo uma tabela que ao clicar em uma célula ela muda a cor de fundo com o código abaixo consegui fazer esta parte, agora o problema é que quando eu clicar e arrastar ela tem que mudar a cor de todas as células onde o mouse passar.

Alguém pode me ajudar, como fazer para que minha função de mudar a cor da célula seja chamada ao clicar e arrastar o mouse, todas as células por onde ele passar seja trocada as cores?

<script>
    function mudaCor(id) {
        if (document.getElementById(id).style.background == "none repeat scroll 0% 0% white") {
            document.getElementById(id).style.background = "green";
        } else {
            document.getElementById(id).style.background = "white";
        }
    }
</script>

<table  border="1" align="center">
    <tr>
        <td id="tdCor1" onmousedown="java script:mudaCor('tdCor1')" width="15" height="15" style="background:white"></td>
        <td id="tdCor2" onmousedown="java script:mudaCor('tdCor2')" width="15" height="15" style="background:white"></td>
        <td id="tdCor3" onmousedown="java script:mudaCor('tdCor3')" width="15" height="15" style="background:white"></td>
        </tr>
    <tr>
        <td id="tdCor25" onmousedown="java script:mudaCor('tdCor25')" width="15" height="15" style="background:white"></td>
        <td id="tdCor26" onmousedown="java script:mudaCor('tdCor26')" width="15" height="15" style="background:white"></td>
        <td id="tdCor27" onmousedown="java script:mudaCor('tdCor27')" width="15" height="15" style="background:white"></td>
        </tr>
</table>

[fiote]

Não é isso que você quer, mas vê se te dá uma luz.

var novaCor = false;

function mudaCorClick(id) {
    if (document.getElementById(id).style['background-color'] == "white") {
        document.getElementById(id).style['background-color'] = "green";
        novaCor = "green";
    } else {
        document.getElementById(id).style['background-color'] = "white";
        novaCor = "white";
    }
}

function mudaCorOver(objeto) {
    if (!novaCor) return 0;
    if (objeto.style['background-color'] != novaCor) {
        objeto.style['background-color'] = novaCor;
    }
}

function saiMouse() {
    novaCor = false;
}

<table  border="1" align="center">
    <tr>
        <td id="tdCor1" onmousedown="java script:mudaCorClick('tdCor1')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        <td id="tdCor2" onmousedown="java script:mudaCorClick('tdCor2')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        <td id="tdCor3" onmousedown="java script:mudaCorClick('tdCor3')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        </tr>
    <tr>
        <td id="tdCor25" onmousedown="java script:mudaCorClick('tdCor25')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        <td id="tdCor26" onmousedown="java script:mudaCorClick('tdCor26')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        <td id="tdCor27" onmousedown="java script:mudaCorClick('tdCor27')" onmouseover="java script:mudaCorOver(this)" onmouseup="java script:saiMouse()" width="15" height="15" style="background-color:white"></td>
        </tr>
</table>