α-wwwiki

user:none (2638 bytes)

_h1 worksheet{sup 2}
_p Click on "init worksheet" then select a cell and enter something in the input field. Today "something" is only text, tomorrow, maybe, math expressions ...
{div {@ style="display:none;"}
{define create (m n) °°
  m++;
  n++;
  var work = '{table {@ id="ws"}';
  for (var j=0; j< n; j++) {
    var row = '{tr ';
    for (var i=0; i< m; i++) {
      var id = 'C['+i+','+j+']';
      row += '{td {@ id="' + id + '" style="text-align:center;"} }';
    }
    work += row + '}';
  }
  work += '}';
  return work;
°°}
}

selected cell : {div {@ id="cell" style="display:inline-block;width:50px; text-align:center;"} }

input field : {input {@ id="input" type="text" value="" placeholder="enter" style="width:350px;"}}

{create 4 8}

{input {@ type="submit" value="init worksheet" onclick="°°

function getDim( foo ) {
  for (var i=0; i< 10; i++)
    if (foo === 'col' && getId('C['+i+',0]') === null ||
        foo === 'row' && getId('C[0,'+i+']') === null) return i;
}

function input() {
  if (select !== null)
    var input = this.value;
    if (input.charAt(0) === '=') {
      // todo formulas evaluation
    }
    select.innerHTML = input;
}

///////////

var M = getDim( 'col' ), 
    N = getDim( 'row' ), 
    select = getId( 'C[1,1]' );

select.style.background = '#888';
getId('cell').innerHTML = 'C[1,1]';
getId('input').focus();

getId('C[0,0]').innerHTML = '';
getId('C[0,0]').style.width = '20px';
getId('C[0,0]').style.textAlign = 'right';

for (var i=1; i< M; i++) {
  getId('C['+i+',0]').style.textAlign = 'center';
  getId('C['+i+',0]').style.weight = 'bold';
  getId('C['+i+',0]').style.width = (600-20)/(M) + 'px';
  getId('C['+i+',0]').style.background = '#ccc';
  getId('C['+i+',0]').innerHTML = String.fromCharCode(64+i);
}
for (var i=1; i< N; i++) {
  getId('C[0,'+i+']').style.textAlign = 'center';
  getId('C[0,'+i+']').style.weight = 'bold';
  getId('C[0,'+i+']').style.background = '#ccc';
  getId('C[0,'+i+']').innerHTML = i;
}

for (var i=1; i< M; i++) {
  for (var j=1; j< N; j++) {
    var id = 'C['+i+','+j+']';
    getId( id ).addEventListener( 'click', selectCell );
  }
}

getId( 'input' ).addEventListener( 'keyup', input );

°°"}}