No te haré la tarea xD
pero sí corregí tu problema
Primero le asigne un id al TR de la primera tabla para poder recorrerlo y saltarme el siguiente TR del estado del pincel.
Luego cambie
Código Javascript
:
Ver originaltd.onclick=function(){td.className = 'color1';};
por
Queda mucho mas limpio.
Luego eliminé tu código que tanto repetias abajo y lo que hice fue, quitar la clase seleccionado a todos tus colores, dejar la clase selecionado en la celda seleccionada y luego pintar el cuadro.
Código HTML:
Ver original<body onload="crearTabla();"> <p>TABLERO DE DIBUJO EN JAVASCRIPT
</p> <table width="500" border="1" id="paleta" summary="Tabla de selección de colores"> Haga CLICK en un color para comenzar a pintar
<td class="color1 seleccionado"></td> <td class="color2" ></td> <td class="color3" ></td> <td class="color4" ></td> <td class="color6" ></td> <td colspan="6" id="pincel">Estado del pincel
</td>
Código Javascript
:
Ver originalfunction crearTabla(){
var tablearea = document.getElementById('zonadibujo');
table = document.createElement('table');
table.className='tablerodibujo';
for (var i = 0; i < 30; i++) {
var tr = document.createElement('tr');
for(var j = 0; j < 30; j++){
var td = document.createElement('td');
td.id="obj"+i+j;
td.style.border ="1px solid #000";
tr.appendChild(td);
td.className = 'color1';
}
table.appendChild(tr);
}
tablearea.appendChild(table);
}
$("#paleta td").click(function() {
$('#color').each(function(){
$(this).find('td').each(function(){
var myClass = $(this).attr("class");
myClass = myClass.split(" ");
if(typeof myClass[1] != "undefined"){
$(this).removeClass( 'seleccionado' );
}
})
})
var newColor = $(this).addClass( 'seleccionado' );
$('.tablerodibujo').each(function(){
$(this).find('td').each(function(){
$(this).removeClass();
$(this).addClass(newColor.attr("class"));
})
})
});
Te dejo la
Demo