Gli sviluppatori Web utilizzano le tabelle per visualizzare i dati complessi. Una tabella consiste di righe e colonne; queste righe e colonne creano una griglia contenente cellule. Talvolta un'applicazione Web deve esaminare una cella specifica ed eseguire altre funzioni. Ad esempio, il codice può nascondere la cella, cambiare colore o estrarre il valore della cella. Uno dei modi più veloci per estrarre un valore da una cella di una tabella è quello di utilizzare JavaScript.

istruzione

1 Aprire una delle tue pagine HTML utilizzando Blocco note e aggiungere questo testo alla sezione "corpo" del documento:

<Table id = confine "myTable" = "3">

<Tr>

<Td id = "C1.1"> rosso </ td> <td id = "C1.2"> giallo </ td>

</ Tr>

<Tr>

<Td id = "C2.1"> Blu </ td> <td id = "C2.2"> verde </ td>

</ Tr>

</ Table>

<Input id = "SshowTableCellValue" type = "button" value = "Mostra tabella valore della cella" onclick = "showTableCellValue ()" /> <p> </ p>

Inserisci a schiera <input id = "riga" type = "text" />

Inserisci numero cellulare <input id = "cellulare" type = "text" />

Ciò genera una tabella con due righe e due colonne. Questo produce quattro celle. Ogni cella contiene il nome di un colore. Il codice crea anche un pulsante e due caselle di testo per l'immissione di valori di riga e colonna. Queste caselle di testo consentono di testare l'applicazione.

2 Aggiungere il seguente codice JavaScript alla sezione "testa" del documento:

<Script type = "text / javascript">

test di funzionalita() {

var elTableRow = document.getElementById ( "somerow");

var = elTableCells elTableRow.getElementsByTagName ( "TD");

allarme (elTableCells [0] .innerText);

}

// Linea 1

var IDtabella = "myTable";

Funzione showTableCellValue () {

// Linee 3-4

var rowChosen = document.getElementById ( "Linea") Valore - 1.;

var cellChosen = document.getElementById ( "Cell") il valore -1.;

// Linee 5

var objTable = document.getElementById (IDtabella);

// Line 6

var = SelectedValue objTable.rows [rowChosen] .Cells [cellChosen] .innerHTML;

alert ( "È stato selezionato" + SelectedValue);

}

</ Script>

Linea uno memorizza ID della tabella nella variabile denominata "IDtabella." Linee tre attraverso quattro recuperare i valori di riga e colonna nelle caselle di testo. Linea cinque recupera un riferimento alla tabella e di linea sei estratti il ​​valore della cella selezionata.

3 Salvare il documento HTML e aprirlo nel browser per visualizzare la tabella.

4 Inserire un numero di riga nella casella di testo "Inserire numero Row". Inserire un numero di cellulare nella casella di testo "Inserire numero di cellulare".

5 Fare clic sul pulsante "Mostra valore della cella". Il codice verrà eseguito, e il browser visualizzerà il valore della cella selezionata.

Consigli e avvertenze

• Verificare che il valore impostato per "IDtabella" nel codice JavaScript corrisponde all'ID tabella che si dà il tavolo nella sezione "corpo" del documento HTML. In questo esempio, tale valore è "myTable." Utilizzare qualsiasi nome che ti piace.