tabelle navigabili

**keysuke** · 12-06-2005, 15:48

Ciao,
è possibile mediante il dhtml rendere navigabile una tabella, cioè potersi spostare da una cella ad un altra mediante l' utilizzo dei tasti frecce in modo da spostari indifferentmente sia in modo orrizontale che verticale.
Grazie!!!!

**Mich_** · 13-06-2005, 10:01

Per qualche browser e hardware e` possibile realizzarlo. Pero` la cosa non e` possibile crossbrowser (i codici di tastiera sono diversi per sistemi operativi diversi, per browser diversi e per tastere diverse).

E la cosa non e` accessibile, ne` ben vista sul Web, proprio per i problemi di cui sopra.

Eventualmente devi usare l'evento onkeyup da applicare alle varie celle, poi devi verificare se e` stato premuto uno dei tasti frecce.

**badaze** · 13-06-2005, 10:45

Puoi provare questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.protected   {background-color:#006666}
.unprotected {background-color:yellow}
.button {width:70}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var maxRows = 3;
var maxCols = 5;

var startRow = 1;
var startCol = 1;

var previous = null;

function move(direction) {
 switch (direction) {
  case "up" :
	 if (startRow - 1 >= 1) {
	  move2(startCol, startRow - 1);
	 } // if (startRow - 1 >= 1
	 break;
	 
	case "down" :
	 if (startRow + 1 <= maxRows) {
	  move2(startCol, startRow + 1);
	 } // if (startRow + 1 <= maxRows)
	 break;
	 
	case "left" :
	 if (startCol - 1 >= 1) {
	  move2(startCol - 1,startRow);
	 } // if (startCol - 1 >= 1)
	 break;
	
	case "right" :
	 if (startCol + 1 <= maxCols) {
	  move2(startCol + 1,startRow);
	 } // if (startCol + 1 <= maxCols)	
	 break;
 } // switch (direction)
} // function move(direction)

function move2(col,row) {
 //------- Settaggio dell'id dell'input corrente
 inputId = "input("+row+","+col+")";
 //------- Ripristino proprieta dell'input precedente
 if (previous != null) {
  previous.className = "protected";
  previous.readOnly  = true; 
 } // if (previous != null)
 //------- Settaggio propieta input corrente
 document.getElementById(inputId).className = "unprotected";
 document.getElementById(inputId).readOnly  = false;
 document.getElementById(inputId).focus();
 //------- Input precedente = input corrente
 previous = document.getElementById(inputId);
 //------- Coordinate dell'input corrente
 startRow = row;
 startCol = col;
} // function move2(col,row)
//-->
</script>


</head>
<body>
<table summary="" border="1">
<tr>
<td id="cell(1,1)"><input id="input(1,1)" type="text" class="protected" readonly size="15"></td>
<td id="cell(1,2)"><input id="input(1,2)" type="text" class="protected" readonly size="15"></td>
<td id="cell(1,3)"><input id="input(1,3)" type="text" class="protected" readonly size="15"></td>
<td id="cell(1,4)"><input id="input(1,4)" type="text" class="protected" readonly size="15"></td>
<td id="cell(1,5)"><input id="input(1,5)" type="text" class="protected" readonly size="15"></td>
</tr>
<tr>
<td id="cell(2,1)"><input id="input(2,1)" type="text" class="protected" readonly size="15"></td>
<td id="cell(2,2)"><input id="input(2,2)" type="text" class="protected" readonly size="15"></td>
<td id="cell(2,3)"><input id="input(2,3)" type="text" class="protected" readonly size="15"></td>
<td id="cell(2,4)"><input id="input(2,4)" type="text" class="protected" readonly size="15"></td>
<td id="cell(2,5)"><input id="input(2,5)" type="text" class="protected" readonly size="15"></td>
</tr>
<tr>
<td id="cell(3,1)"><input id="input(3,1)" type="text" class="protected" readonly size="15"></td>
<td id="cell(3,2)"><input id="input(3,2)" type="text" class="protected" readonly size="15"></td>
<td id="cell(3,3)"><input id="input(3,3)" type="text" class="protected" readonly size="15"></td>
<td id="cell(3,4)"><input id="input(3,4)" type="text" class="protected" readonly size="15"></td>
<td id="cell(3,5)"><input id="input(3,5)" type="text" class="protected" readonly size="15"></td>
</tr>
</table>


<table summary="">
<tr>
 <td></td>
 <td><input class="button" type="button" value="Up"    onclick="move('up')"></td>
 <td></td>
</tr>
<tr>
 <td><input class="button" type="button" value="Left"  onclick="move('left')"></td>
 <td></td>
 <td><input class="button" type="button" value="Right" onclick="move('right')"></td>
</tr>
<tr>
 <td></td>
 <td><input class="button" type="button" value="Down"  onclick="move('down')"></td>
 <td></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
move2(startCol,startRow)
//-->
</script>

</body>
</html>

Discussione: tabelle navigabili

Strumenti discussione

Ricerca discussione

Visualizza

tabelle navigabili

Permessi di invio