Duvida de evento em tabela via javascript

Front-end
#1

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="javascript:mudaCor('tdCor1')" width="15" height="15" style="background:white"></td>
		<td id="tdCor2" onmousedown="javascript:mudaCor('tdCor2')" width="15" height="15" style="background:white"></td>
		<td id="tdCor3" onmousedown="javascript:mudaCor('tdCor3')" width="15" height="15" style="background:white"></td>
        </tr>
	<tr>
		<td id="tdCor25" onmousedown="javascript:mudaCor('tdCor25')" width="15" height="15" style="background:white"></td>
		<td id="tdCor26" onmousedown="javascript:mudaCor('tdCor26')" width="15" height="15" style="background:white"></td>
		<td id="tdCor27" onmousedown="javascript:mudaCor('tdCor27')" width="15" height="15" style="background:white"></td>
        </tr>
</table>
#2