Spostamento in tabella con frecce

[vic53]

Ciao ti ringrazio tantissimo

l'esempio funziona ed una buona base da adattare al mio problema,

purtroppo nel presentarlo (e nella sezione sbagliata per giunta...) ho dimenticato di specificare alcuni dettagli importanti.

• La tabella è dinamica (9 righe per un numero di colonne che varia da 6 a 24).
• Lo spostamento deve avvenire solo tra caselle libere, una volta digitata la lettera al ripresentarsi dello schema la lettera viene evidenziata (stampata) nella cella ma non come campo di input.

In ordine potrei ma la vedo dura:

1) capire bene l'esempio

ho provato al volo a gestire lo spostamento orizzontale (inserendo i codici 37 e 39 nella funzione SpostaUpDown) ma chiaramente non basta, farò altri tentativi.

2) scrivere dinamicamente la sezione javascript da php... che conosce la dislocazione delle caselle libere.

Nel mio caso sarebbe una vera chicca...

ciao

si puo fare ma bisogna scrivere jscript dinamico...
io lo potrei fare ma sono piu ferrato in ASP dove sviluppo applicazioni per clienti e amici in ASP vbscript e jscript + jquery...
pero' anche con javascript puoi usare la creazione di html dinamico lato client....
se mi dici le specifiche e ho tempo provo a sviluppare un modello come dici.
per bypassare le caselle occupate ti suggerisco di usare la function onFocus e testare se diversa da blank per saltare alla cella successiva... (C=C+1 con test fine riga con R=R+1) questo porterebbe il cursore a spostarsi sulle celle libere come ti serve ...pero bisogna studiarci su e fare le prove.
bye

[vitren54]

ciao

si puo fare ma bisogna scrivere jscript dinamico...
io lo potrei fare ma sono piu ferrato in ASP dove sviluppo applicazioni per clienti e amici in ASP vbscript e jscript + jquery...
pero' anche con javascript puoi usare la creazione di html dinamico lato client....
se mi dici le specifiche e ho tempo provo a sviluppare un modello come dici.
per bypassare le caselle occupate ti suggerisco di usare la function onFocus e testare se diversa da blank per saltare alla cella successiva... (C=C+1 con test fine riga con R=R+1) questo porterebbe il cursore a spostarsi sulle celle libere come ti serve ...pero bisogna studiarci su e fare le prove.
bye

Ciao

la tabella viene generata in php e quindi vedrei bene (ma posso sbagliarmi) l'integrazione con javascript, uno pensa a crearla con i dati opportuni e l'altro a gestire gli spostamenti.

Nel loop php nidificato righe/colonne attribuirei ad ogni cella una classe, l'id, nome ed evento scrivendo da parte una sezione javascript che operi le opportune azioni.

L'aspetto degli spostamenti che non crea problemi ad es. sui tablet è stato sottovalutato per i pc e risulta essere scomodo e fastidioso.

dell'applicazione ne avevo parlato e operativamente, in un mese, molte cose sono cambiate:

http://forum.html.it/forum/showthread.php?threadid=2932440

[vic53]

i dati di partenza per fare le prove sono numero di righe e numero di colonne; io darei a queste celle l'id="R+riga+C+colonna" come ho fatto nell'esempio questo per poter usare jscript dinamicamente.
poi se vuoi spostarti con le frecce orizzontali hai il problema che quando sei sul campo in edit, la freccia si sposta sul campo.. e solo alla fine del campo si deve spostare nella cella successiva libera... e' chiaro?...Questo vale anche per lo spostamento a sinistra fino a inizio campo. Poi il load delle celle lo fai con PHP tramite value="<?...>"
Ho capito bene?
ciao

[vitren54]

i dati di partenza per fare le prove sono numero di righe e numero di colonne; io darei a queste celle l'id="R+riga+C+colonna" come ho fatto nell'esempio questo per poter usare jscript dinamicamente.
poi se vuoi spostarti con le frecce orizzontali hai il problema che quando sei sul campo in edit, la freccia si sposta sul campo.. e solo alla fine del campo si deve spostare nella cella successiva libera... e' chiaro?...Questo vale anche per lo spostamento a sinistra fino a inizio campo. Poi il load delle celle lo fai con PHP tramite value="<?...>"
Ho capito bene?
ciao

OK per l'id="R+riga+C+colonna"

qualche dubbio sul campo di edit...
il campo di edit è lungo 1 e pensavo ad un comportamento simile al TAB che salta da una cella all'altra indipendentemente dal fatto che sia piena o vuota.

Si il load delle celle lo faccio con PHP che inserisce un campo di input se la cella è vuota o visualizza il valore e quindi la cella deve essere scavalcata nello spostamento del cursore.

[vic53]

OK per l'id="R+riga+C+colonna"

qualche dubbio sul campo di edit...
il campo di edit è lungo 1 e pensavo ad un comportamento simile al TAB che salta da una cella all'altra indipendentemente dal fatto che sia piena o vuota.

Si il load delle celle lo faccio con PHP che inserisce un campo di input se la cella è vuota o visualizza il valore e quindi la cella deve essere scavalcata nello spostamento del cursore.

Ciao
come ti avevo promesso ho dato una occhiata al lato programmazione del problema e ti posto
il piccolo file tanto per cominciare ...poi ci devi lavorare tu sopra...

<html>
<head>
<title>TEST SPOSTAMENTO CURSORI SU TABELLA </title>
<script type="text/javascript" language="javascript" >
var R = 1, C = 1;
var nrows = 6, ncells = 24;
function SpostaUpDown(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode
// alert("left");
if (code == 37) {SetFocus(R, C - 1);}
// alert("right");
if (code == 39) {SetFocus(R, C + 1);}

if (code == 38) { SetFocus(R - 1, C); }

if (code == 40) { SetFocus(R + 1, C); }

if (code == 13) {
// alert(code);
Invio(R, C, e);
}
// invio
}

function SetFocus(R, C) {
// alert("call to setfocus "+R+" "+C);
if (R==0) {
R=1;
C=1;
}
if (R>nrows) {R=6};
//if (C==0 || C==7) {C=1};
if (C>ncells) {
C=1;
R=R+1;
if (R>6) {R=6}
}
// SalvaCursore( R, C);
document.getElementById("R"+R+"C"+C).focus();
// document.getElementById("R"+R+"C"+C).select();
}

function Invio(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode;
if (code == 13) {
ElaboraDatiForm(R, C);
return true; ;
}
else {
return false;
}
}

function ElaboraDatiForm(R, C) {
alert("elaboro cella a RIGA=" + R + ", COL.=" + C);
bckMainPage();
}
function NumbersOnly(myfield, e, dec) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else
if ((("0123456789,").indexOf(keychar) > -1))
return true;
else
return false;
}

function LettersOnly(myfield, e, dec) {
var key;
var keychar;

if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// alert("code=" + keychar+"-"+key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("abcdefghilmnopqrstuvzwxyjkABCDEFGHILMNOPQRSTUV ZWXYK .,àèìòù&0123456789").indexOf(keychar) > -1))
return true;
else
return false;
}
function CellaPiena(R,C) {
if (document.getElmentById("R"+R+"C"+C).value!="") {
// skip to next cell
document.getElmentById("R"+R+"C"+C).setAttribute(" backgroundColor","#FFFFFF");
SetFocus(R,C+1);
}
document.getElmentById("R"+R+"C"+C).setAttribute(" backgroundColor","#8AF4F4");
}
</script>


<style type="text/css">
<!--
input.objAttivo:hover {
background-color: #3399FF;
color:#000000;
}
input.objAttivo:active {
background-color:#FFFFFF;
}
input.objAttivo1 {
background-color: #666666;
color:#FFFFFF;
text-align:center;
}
-->
</style></head>
</head>
<body>
<table>
<script language="javascript" type="text/javascript">
for (var R = 1; R < nrows + 1; R++) {
document.write("<tr>");
for (var C=1; C < ncells; C++) {
document.write("<td>");
document.write("<input type=text size=1 value='' onkeypress='return LettersOnly(this, event)' onKeyDown='SpostaUpDown("+R+","+C+", event)' ");
document.write(" id='R" + R + "C" + C + "' name='R" + R + "C" + C + "'");
document.write(" onFocus=this.style.backgroundColor='#8AF4F4' onBlur=this.style.backgroundColor='#ffffff' />");
document.write("</td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
</html>

fammi sapere come procederai che sono curioso...
ciao

[vitren54]

Ciao
come ti avevo promesso ho dato una occhiata al lato programmazione del problema e ti posto
il piccolo file tanto per cominciare ...poi ci devi lavorare tu sopra...


fammi sapere come procederai che sono curioso...
ciao

Ti ringrazio

lo script è notevole spero di sfruttarlo al meglio, sicuramente ti terrò aggiornato anche se prevedo qualche break intermedio.

ciao