Hola de nuevo
Afontcu:
No sé qué valor le das a
num, pero supongo que será
9 porque el sudoku es 9x9. Yo lo que hacía era bucles for anidados:
Código PHP:
for(var a=0; a<9; a++) {
//bloques grandes enteros de 9 casillas
for(var i=0; i<3; i++) {
// filas dentro del bloque de 3x3
for(var j=0; j<3; j++) {
//columnas dentro del bloque de 3x3
}
}
}
Así veía más fácil controlar los formatos del bloque de 9x9. El for de la
i y de la
j casi se podrían aunar en uno sólo, ya que la posición de los cuadros se controlaría con CSS.
Puedes intentar esa idea.
Respecto a diferenciar los bordes de los <input> lo veo bastante complicado... habría que identificar cada input para saber su posición, y según ésta decidir qué bordes serán gordos y cuales finos... Lo más fácil es plantearte el código HTML con el que quieres acabar, y a partir de ahí trabajar en javascript. He planteado ésto, y ajustado los valores para Firefox (en IE supongo que no cuadrará):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
.sudoku {
width: 303px;
}
.bloque9x9 {
width: 96px;
background-color:red;
float: left;
margin: 0 5px 5px 0;
}
.boto {
border: solid 1px black;
float:left;
width: 30px;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="sudoku">
<!-- #1 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #2 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #3 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #4 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #5 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #6 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #7 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #8 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
<!-- #9 -->
<div class="bloque9x9">
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
<input type="text" class='boto' value='' maxlength='1' size='1' />
</div>
</div>
</body>
</html>
Bueno, sigue investigando, el tema no es muy complicado.
Saludos
