Come per il riempimento di una cella di tabella con JavaScript

May 5

Manipolazione tabelle HTML richiede JavaScript. Il Document Object Model HTML, o DOM, offre agli sviluppatori la possibilità di utilizzare JavaScript per cambiare il "innerHTML" proprietà di qualsiasi elemento in una pagina Web tra cui le celle della tabella. La proprietà innerHTML genera il contenuto che si vede in una pagina Web. Si potrebbe modificare la proprietà innerHTML di una cella di tabella, ad esempio, quando un utente fa clic su un pulsante "Chiedi il prezzo". Questa azione causerebbe un prezzo appaia nella cella. Una volta capito come utilizzare il DOM per individuare una cella, si può riempire con qualsiasi valore all'istante.

istruzione

1 Aprire un documento HTML e incollare il seguente codice nella sezione "corpo" del documento:

<Table id = confine "testTable1" = 1>
<Tr>
<Td> valore </ td>
<Td> valore </ td>
</ Tr>

<Tr>
<Td> valore </ td>
<Td> valore </ td>
</ Tr>

<Tr>
<Td> valore </ td>
<Td> valore </ td>
</ Tr>

</ Table>
<Input type = valore "pulsante" = "Fill cellulare" onclick = "tornare fillCell ( 'testTable1', '2', '1', 'Test Valore')" />

Questo codice crea una nuova tabella. Il tavolo, il cui "id" è "testTable1" contiene tre righe con due celle per riga. Il pulsante chiama una funzione JavaScript denominato "fillCell." Tale funzione individua una cella e lo riempie con il valore "Test Value" passato in caso pulsante di scatto.

2 Incollare il codice riportato di seguito nella sezione "script" del documento:

Funzione fillCell (tavolo, targetRow, targetCell, fillContents) {

var tableObj = document.getElementById (tabella);
var = selectedRow tableObj.rows [targetRow-1];

var = selectedCell selectedRow.cells [targetCell-1];
selectedCell.innerHTML = fillContents;
}

Questa funzione riceve la cella di ID tabella, riga di destinazione e di destinazione approvata dal pulsante di scatto. Riceve, inoltre, che il valore che si desidera utilizzare per riempire la cella di destinazione. Il codice individua quindi la cella desiderata all'interno della riga di destinazione e imposta la sua proprietà innerHTML per il valore memorizzato nella variabile fillContents.

3 Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante per eseguire la funzione JavaScript. Si localizza la prima cella della seconda riga e riempie la cella con le parole "prova di valore."

Consigli e avvertenze

  • Rimuovere il contenuto di una cella impostando il valore di cellContents su "" prima di chiamare la funzione fillCell. Questo imposta il valore innerHTML della cella di destinazione di spazi vuoti.