Nwlapcug.com


Come nascondere una cella di tabella

Gli sviluppatori Web creano effetti speciali per intrattenere i visitatori del sito e aggiungere funzionalità di siti Web. Un elemento di pagina Web importante è la tabella HTML. Composto da righe e celle di tabelle sono utili per la visualizzazione di dati tabulari. A volte non è possibile ogni utente di visualizzare tutte le celle in una tabella. In tali casi, non è necessario creare tavoli unici per gestire molteplici situazioni. Poche righe di JavaScript consentirà è nascondere qualsiasi cella qualsiasi tabella.

Istruzioni

1

Aprire il documento HTML utilizzando blocco note o un editor HTML.

2

Aggiungere il codice seguente dopo il documento "< body >" tag:

< id tabella = "table1" border = "2" >

< tr >

< id td = "r 1.1" > 1.1 cella < /td >< id td = "r1.2" > cella 1.2 < /td >

< id td = "r 1.3" > cella 1.3 < /td >

< /tr >

< tr >

< id td = "r 2.1" > 2.1 cella < /td >

< id td = "r2.2" > 2.1 cella < /td >

< id td = "r2.3" > cella 2.3 < /td >

< /tr >

< / tabella >

< p >< / p >

< input type = 'button' onClick='javascript:hideCell("hidden");' valore = 'Nascondi' / >

< input type = 'button' onClick='javascript:hideCell("visible");' valore = 'Mostra' / >< p >< / p >

Riga per nascondere < input id = "hideRow" type = "text" / >< p >< / p >

Cella per nascondere < input id = "hideCell" type = "testo" / >

Questo crea una tabella con due righe e tre colonne. Si noti che ogni cella (td) ha un ID univoco. L'ID per una cella nella riga uno è r 1.1. L'ID cella tre in fila due è r2.3. La prima cifra dell'ID identifica la riga. La seconda cifra identifica il numero di cellule in tale riga. I due campi di testo consentono di inserire una riga e una colonna. I due pulsanti chiamano 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 il tag "< head >" finale nel documento:

Function hideCell(visibility) () {

linea 1

var visibilityStatus = visibilità;

linee 2-3

var rowNbr = document.getElementById("hideRow").value;

var cellNbr = document.getElementById("hideCell").value;

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à "nascosti" o "visibile", a seconda del pulsante che si sceglie. Linee due attraverso tre recuperano i valori di riga e cella immessi nelle caselle di testo. Linea quattro combina quei numeri in un ID. Per esempio, se si immette 1 e 2 nella casella di testo riga e cella, quarta riga si combina tali valori per creare "r1.2." Linea cinque utilizza tale valore per individuare la cella di tabella selezionata. Linea 6 imposta la visibilità della cella al valore passato insieme sulla linea 1.

4

Salvare il file HTML e aprirlo nel browser. Vedete la tabella con due righe e tre colonne.

5

Digitare un valore compreso tra uno e due nella casella di testo "Selected Row". Digitare un valore compreso tra uno e tre nella casella di testo "Cella selezionata".

6

Fare clic su "Nascondi". Il codice verrà eseguito e nascondere la cella selezionata.

7

Fare clic su "Visualizza". La cella verrà nuovamente visualizzata.

Consigli & Avvertenze

  • La tabella di esempio ha due righe e tre colonne. Dimensioni della vostra tabella fare qualcosa ti piace usare la stessa sequenza dei nomi per la cella ID. Per esempio, per aggiungere una quarta cella nella prima riga, il nome relativo ID "r1.4."