scorrere lista table

**mrcanoa** · 18-11-2004, 16:14

Ciao Lista,

ho questo scriptino scritto dal mitico badaze:

codice:

<HTML>
<HEAD>
	<TITLE>Selezione da una lista digitando i caratteri in un TextBox</TITLE>
<HEAD>
<style type="text/css">
<!--
.inverted {color:white;background-color:navy} 
-->
</style>

<SCRIPT>
function tasti(){
	if(event.keyCode==38){
	document.forms[0].input1.blur()
	//alert('38')
	gotoPrevious()
	}
	else if(event.keyCode==40){
	document.forms[0].input1.blur()
	//alert('40')
	gotoNext()
	}
}
document.onkeyup=tasti
<!--
var previousRow = null;
function find() {
 if (previousRow != null) {
  previousRow.className = "";
 } // if (previousRow != null)
 stringToFind = document.getElementById('input1').value;
 stringToFind = stringToFind.toLowerCase();
 rows         = document.getElementById('stati').rows.length;
 for (i=0;i<rows;i++) {
  currentRow = document.getElementById('stati').rows.item(i)
  cells = currentRow.cells.length;
	//------------ si assume che la colonna da controllare sia la prima ovvero (1 - 1) = 0
	controlledCell = 0
	for (j=0;j<cells;j++) {
	 currentCell     = currentRow.cells.item(controlledCell);
	 currentCellText = currentCell.innerHTML;
	 currentCellText = currentCellText.toLowerCase();

	 if (stringToFind <= currentCellText) {
	  currentRow.className = "inverted";
		previousRow          = currentRow;
		document.getElementById('container').scrollTop = currentRow.offsetTop;
		return;
	 } // if (stringToFind <= currentCellText) 
	} // for (j=0;j<cells;j++)
 } //  for (i=0;i<rows;i++
 alert("non trovato");
} // function find()

function gotoPrevious() {
 changeRow(-1);
} // function gotoPrevious()

function gotoNext() {
 changeRow(1);
} // function gotoNext()

function changeRow(vDirection) {
 canChange = false;
 if (vDirection == 1) {
  if (currentRow.rowIndex < document.getElementById('stati').rows.length-1) {
	 canChange = true;
	 newRow    = currentRow.rowIndex + 1;
  } // if (currentRow.rowIndex < document.getElementById('stati').rows.length-1)
 } else {
  if (currentRow.rowIndex > 0) {
	 canChange = true;
	 newRow    = currentRow.rowIndex - 1;	 
  } // if (currentRow.rowIndex > 0)
 } // if (vDirection == 1) 
 if (canChange) {
  gotoRow(newRow);
	return;	
 } // if (currentRow.rowIndex > 0) 
} // function changeRow(vDirection)


function gotoRow(aRowNumber) {
 if (previousRow == null) {
  previousRow = document.getElementById('stati').rows.item(0);
  //currentRow  = document.getElementById('stati').rows.item(0);
 } // if (previousRow == null)
  previousRow.className = "";  
  currentRow           = document.getElementById('stati').rows.item(aRowNumber);
	currentRow.className = "inverted";
	previousRow          = currentRow;
  document.getElementById('container').scrollTop = currentRow.offsetTop;
} // function gotoRow() 

// ==============================================================================
// Scroll
// ==============================================================================
var stopScrollUp   = true;
var stopScrollDown = true;
var scrollStep     = 5;

function pippo() {
 if (! stopScrollUp) {
  scrollUp();
 } // if (! stopScrollUp)
 if (! stopScrollDown) {
  scrollDown();
 } // if (! stopScrollDown)
} // function pippo()

window.setInterval("pippo()",10);

function scrollUp() {
 if (document.getElementById('container').scrollTop > 0) {
  document.getElementById('container').scrollTop -= scrollStep;
 } else {
  document.getElementById('container').scrollTop = 0;
	return;
 } // if (document.getElementById('container').scrollTop > 0)
} // function scrollUp()


function scrollDown() {
 if (document.getElementById('container').scrollTop <= document.getElementById('stati').offsetHeight - document.getElementById('container').offsetHeight) {
  document.getElementById('container').scrollTop+= scrollStep;
 } else {
  document.getElementById('container').scrollTop = document.getElementById('stati').height;
	alert('max');
	return;
 } // if (document.getElementById('container').scrollTop < document.getElementById('stati').height)
} // function scrollDown()

function stopScroll() {
 stop = true;
} // function stopScroll()

//-->
</SCRIPT>

</HEAD>
<BODY id="body" BGCOLOR="#ffffff" onLoad="document.forms[0].input1.select()">
<FORM NAME="modulo">
<INPUT TYPE="text" NAME="input1" ID="input1" onKeyUp="find()"> 



 <DIV ID="container" 
   STYLE="height:200px; width:150;z-index=100;font-family:verdana;font-size:9pt;overflow: auto;">
	<TABLE id="stati" NAME="stati" BORDER="1">
<TR><TD id="1">Albania</TD></TR>
<TR><TD id="2">Cayman Islands</TD></TR>
<TR><TD id="3">Central African Rep.</TD></TR>
<TR><TD id="4">Chad</TD></TR>
<TR><TD id="5">Chile</TD></TR>
<TR><TD id="6">China</TD></TR>
<TR><TD id="7">Christmas Island</TD></TR>
<TR><TD id="8">Gambia</TD></TR>
<TR><TD id="9">Georgia</TD></TR>
</TABLE>
</div>
<input type="button" id="up" value="Up" onmouseover="stopScrollUp=false" onmouseout="stopScrollUp=true">
<input type="button" id="down" value="Down" onmouseover="stopScrollDown=false" onmouseout="stopScrollDown=true">
<input type="button" id="previous" value="Previous" onclick="gotoPrevious()">
<input type="button" id="next" value="Next" onclick="gotoNext()">


<div id="status"></div>
</FORM>
<script language="JavaScript" type="text/javascript">
<!--
//---------------- Si posiziona sulla prima riga
gotoRow(0);
//-->
</script>


</BODY>
</HTML>

Vorrei implementarlo inserendo altre td per creare una ricerca semplice (vedi img allegata) in base alla select selezionata.

Avevo pensato ad una cosa del genere

currentRow = document.getElementById('stati[barcode]').rows.item(i)

ma come di regola...non funzia. Sapreste aiutarmi o avete qualche suggerimento????

Grazie mille

**mrcanoa** · 18-11-2004, 18:32

Ehi.....il formun è stato rinnovato ma non funziona.....!!!!...

i vecchi post risalgono da soli al primo posto....

ops....

salve....tutto bien???

Ma che dite è un cosa impossibile quella che vorrei fare????

Discussione: scorrere lista table

Strumenti discussione

Ricerca discussione

Visualizza

scorrere lista table

Permessi di invio