Fun with jQuery

I have created jSudoku, an implementation of Sudoku in Javascript with jQuery.

Using jQuery allowed me to use very simple HTML. Just a table with nine rows of nine blocks, each with just a nonbreaking space inside. It kinda breaks the display code, so trust me, OK?

And also very simple

table {
    margin: 0 auto ;
    border-collapse: collapse ;
    }
td {
    height: 40px ;
    width: 40px ;
    font-size: 30px ;
    line-height:40px ;
    text-align: center ;
    padding: 0 ;
    }
#junk {
    display: none ;
    }

.header {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 70px ;
    background-color: #666 ;
    padding-left: 5% ;
    border-bottom: 2px solid #333 ;
    }

.header .title {
    color: white ;
    font-size: 48px ;
    }

.header .subtitle {
    color: #bbb ;
    font-size: 14px ;
    border-bottom: 1px solid #bbb ;
    }

.main{
    position: absolute ;
    top: 100px ;
    left: 0 ;
    width: 100% ;
    }

.footer{
    background-color: #aaa ;
    border-top: 2px solid #ccc ;
    color: #333 ;
    position: absolute ;
    bottom: 0 ;
    left: 0 ;
    width: 100% ;
    }

Nothing even remotely clever there.

Where the cleverness comes in is in the javascript.

//------------------------------------------------------------------------------
// Kinda the "Main()" for this. Runs when the page is fully loaded.
//------------------------------------------------------------------------------
$(function() {

//--------------------------------------------------------------------------
// sudoku
//--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    // look and feel
    //--------------------------------------------------------------------------
    $( '#sudoku' ).children( 'table' ).each( function() {
            } ) ;
    $( 'td' ).each( function() {
            $( this ).css( 'border-color'              , 'black' ) ;
            $( this ).css( 'border-width'              , '1px' ) ;
            $( this ).css( 'border-style'              , 'solid' ) ;
            } ) ;
    $( 'td:even' ).each( function() {
            $( this ).css( 'background-color'          , '#eee' ) ;
            } ) ;
    //--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    // borders
    //--------------------------------------------------------------------------
    var i = 1 ;
    var j = 1 ;
    $( 'tr' ).each( function() {
        i = 1 ;
        $( this ).children( 'td' ).each( function() {
            //$( this ).html( i ) ;
            if ( aSudoku[j][i] != '' ) {
                $( this ).html( aSudoku[j][i] ) ;
                $( this ).attr( 'class'       , 'static' ) ;
                $( this ).css(  'font-weight' , '700' ) ;
//                $( this ).css(  'color'       , '#000' ) ;
                }
            else {
                $( this ).attr( 'class'       , 'change' ) ;
                $( this ).css(  'font-weight' , '100'    ) ;
                $( this ).css(  'font-size'   , '28px'   ) ;
//                $( this ).css(  'color'       , '#066'   ) ;
                }
            if ( i == 1 || i == 4 || i == 7 ) {
                $( this ).css( 'border-left-width'   , '3px' )
                } ;
            if ( i == 3 || i == 6 || i == 9 ) {
                $( this ).css( 'border-right-width'  , '3px' )
                } ;
            if ( j == 1 || j == 4 || j == 7 ) {
                $( this ).css( 'border-top-width'    , '3px' )
                } ;
            if ( j == 3 || j == 6 || j == 9 ) {
                $( this ).css( 'border-bottom-width' , '3px' )
                } ;
            i++ ;
            } ) ;
        j++ ;
        } ) ;

    //--------------------------------------------------------------------------
    // position tracking
    //--------------------------------------------------------------------------
    $( 'td:even' ).hover( function() {
        $( this ).css( 'background-color'          , '#eea' ) ;
        } , function() {
        $( this ).css( 'background-color'          , '#eee' ) ;
        } ) ;
    $( 'td:odd'  ).hover( function() {
        $( this ).css( 'background-color'          , '#eea' ) ;
        } , function() {
        $( this ).css( 'background-color'          , '#fff' ) ;
        } ) ;

    //--------------------------------------------------------------------------
    // setting numbers
    //--------------------------------------------------------------------------

    var box ;
    $( 'td.change' ).hover(
        function() {
            box = $( this ) ;
            $( document ).keypress( function(e) {
                if ( ( e.which > 48 && e.which < 58 ) ||
                     ( e.which == 32 ) && ( 1 ) ) {
                    var c = String.fromCharCode( e.which ) ;
                    if ( c == ' ' ) { c = ' ' ; }
                    box.html( c ) ;
                    }
                } ) ;
            score_table( ) ;
            } ,
        function() {
            box = $( '#junk' ) ;
            score_table( ) ;
            }
        ) ;

    //--------------------------------------------------------------------------

    score_table() ;

    } ) ;
//------------------------------------------------------------------------------



//------------------------------------------------------------------------------
function score_table (  ) {
    $( 'input#space' ).attr('value','') ;
    var results = new Array(9) ;
    for (var i = 0 ; i < 9 ; i++ ){
        results[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;
        }
    var isDup = new Array(9) ;
    for (var i = 0 ; i < 9 ; i++ ){
        isDup[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;
        }
    var output = '' ;
    var t = ' ' ;
    var nl = '\n' ;

    // Neeed To Check....

    var x = 0 ;
    var trs = $( '#stable tr' ) ;
    trs.each( function() {
        var y = 0 ;
        $( this ).find( 'td' ).each( function() {
            results[x][y] = $( this ) ;
            y++ ;
            }) ;
        x++ ;
        }) ;

    //  each row ---------------------------------------------------------------

    for ( var x = 0 ; x < 9; x++ ) {
      var aColumn = new Array(10) ;
      for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
      // first pass -- count
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        if ( val.length == 8 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( val > 0 ) { aColumn[val]++ ; }
        }
      // second pass -- mark isDup
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( aColumn[val] > 1 ) {
          isDup[x][y] = 1 ;
          }
        }
      }

    // each column -------------------------------------------------------------

    for ( var y = 0 ; y < 9; y++ ) {
      var aColumn = new Array(10) ;
      for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
      // first pass -- count
      for ( var x = 0 ; x < 9 ; x++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( val > 0 ) { aColumn[val]++ ; }
        }
      // second pass -- mark isDup
      for ( var x = 0 ; x < 9 ; x++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( aColumn[val] > 1 ) {
          isDup[x][y] = 1 ;
          }
        }
      }

    // each block --------------------------------------------------------------

    var range = new Array(3) ;
    range[0] = [ 0 , 1 , 2 ] ;
    range[1] = [ 3 , 4 , 5 ] ;
    range[2] = [ 6 , 7 , 8 ] ;

    for ( var a = 0 ; a < 3 ; a++ ) {
      for ( var b = 0 ; b < 3 ; b++ ) {
        var rangeX = range[a] ;
        var rangeY = range[b] ;
        output = output + a + b + nl ;

        var aColumn = new Array(10) ;
        for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
        // first pass -- count
        for ( var c = 0 ; c < rangeX.length ; c++ ) {
          for ( var d = 0 ; d < rangeY.length ; d++ ) {
            var x = rangeX[c] ;
            var y = rangeY[d] ;

            var val = results[x][y].html() ;
            if ( val.length != 1 ) { val = 0 ; }
            val = parseInt( val ) ;
            if ( val > 0 ) { aColumn[val]++ ; }
            }
          }
        // second pass -- mark isDup
        for ( var c = 0 ; c < rangeX.length ; c++ ) {
          for ( var d = 0 ; d < rangeY.length ; d++ ) {
            var x = rangeX[c] ;
            var y = rangeY[d] ;

            var val = results[x][y].html() ;
            if ( val.length != 1 ) { val = 0 ; }
            val = parseInt( val ) ;
            if ( aColumn[val] > 1 ) { isDup[x][y] = 1 ; }
            }
          }
        }
      }

    // and mark ----------------------------------------------------------------
    output = '' ;
    for ( var x = 0 ; x < 9; x++ ) {
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        var dup = isDup[x][y] ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( dup == 1 ) { make_red( results[x][y] ) ; }
        else          { unmake_red( results[x][y] ) ; }
        }
      output = output + nl ;
      }
    }
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
// make_red
//------------------------------------------------------------------------------
function make_red ( td ) {
    td.css( 'color' , 'red' ) ;
    }
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
// make_red
//------------------------------------------------------------------------------
function unmake_red ( td ) {
    td.css( 'color' , '#000' ) ;
    }
//------------------------------------------------------------------------------

This code has only been tested in Firefox 3.0. If you have problems, please report them here. And nothing say "Hey, you won!" when the puzzle is solved yet. I figure that will come when I can generate new puzzles. Sorry.

The next bit, the tricky bit, would be to generate new puzzles. I don't have that yet. But if I can make 'em up, I can put 'em into the puzzle. Feel free to try it.