July 18
Gli sviluppatori Web creano effetti speciali per intrattenere i visitatori del sito e aggiungere funzionalità a siti web. Un importante elemento della pagina Web è la tabella HTML. Tavoli costituiti da righe e cellule sono utili per visualizzare dati tabulari. A volte non si può decidere a ogni utente di vedere ogni cella in una tabella. In questi casi, non è necessario creare le tabelle uniche per gestire più situazioni. Poche righe di JavaScript vi permetterà di nascondere qualsiasi cella in una tabella.
1 Aprire il documento HTML utilizzando il blocco note o un editor HTML.
2 Aggiungere il seguente codice dopo il documento "<body>" tag:
<Table id = confine "Table1" = "2">
<Tr>
<Td id = "R1.1"> Cell 1.1 </ td> <td id = "R1.2"> Cell 1.2 </ td>
<Td id = "R1.3"> Cell 1.3 </ td>
</ Tr>
<Tr>
<Td id = "R2.1"> Cell 2.1 </ td>
<Td id = "R2.2"> Cell 2.1 </ td>
<Td id = "R2.3"> Cell 2.3 </ td>
</ Tr>
</ Table>
<P> </ p>
<Input type = 'tasto' onclick = 'javascript: hideCell ( "nascosto");' Valore = 'nascondere' />
<Input type = 'tasto' onclick = 'javascript: hideCell ( "visibile");' Valore = 'Mostra' /> <p> </ p>
Riga nascondere <input id = "hideRow" type = "text" /> <p> </ p>
Cella per nascondere <input id = "hideCell" type = "text" />
Questo crea una tabella con due righe e tre colonne. Si noti che ogni cella (td) ha un ID univoco. L'ID per la cella di uno in fila uno è R1.1. L'ID per tre cellule in seconda fila è R2.3. La prima cifra nel ID identifica la riga. La seconda cifra identifica il numero di cellule in quella riga. I due campi di testo consentono di inserire una riga e una colonna. I due pulsanti chiamare una funzione JavaScript che nasconde o mostra la cella selezionata. Il primo pulsante passa "nascosto" alla funzione. Il secondo pulsante passa "visibile".
3 Aggiungere questo codice JavaScript per prima la "<head>" tag finale nel documento:
Funzione hideCell (visibilità) {
// Linea 1
var = visibilityStatus visibilità;
// linee 2-3
. Var rowNbr = document.getElementById ( "hideRow") del valore;
var cellNbr = document.getElementById ( "hideCell") del valore.;
// Linea 4
var cellToHide = "r" + rowNbr + "." + CellNbr;
// Linea 5
var targetCell = document.getElementById (cellToHide);
// Linea 6
targetCell.style.visibility = visibilityStatus;
}
Questa funzione accetta il valore che i pulsanti passano e memorizza il valore in "visibilityStatus." Questo valore sarà "nascosto" o "visibile" a seconda del pulsante che si fa clic. Righe da due a tre recuperare i valori di riga e cellulari inseriti nelle caselle di testo. Linea quattro combina questi numeri in un ID. Per esempio, se si inserisce 1 e 2 nelle caselle di riga e di testo cella, linea a quattro combinerà questi valori per creare "R1.2". Linea cinque utilizza quel valore per individuare la cella di tabella selezionata. Linea sei serie visibilità della cella al valore passato impostato sulla linea 1.
4 Salvare il file HTML e aprirlo nel browser. Si vedrà il tavolo con due righe e tre colonne.
5 Digitare un valore compreso tra uno e due nella casella di testo "riga selezionata". Digitare un valore compreso tra uno e tre nella casella di testo "cella selezionata".
6 Fai clic su "Hide". Il codice verrà eseguito e nascondere la cella selezionata.
7 Fai clic su "Show". La cella riapparirà.