Uno dei modi più semplici per poter sfruttare il document object model HTML (elementi e contenitori) è tramite JavaScript. JavaScript è un linguaggio lato client che ha una varietà di funzioni che consentono agli sviluppatori web di identificare elementi o contenitori e modificarli in base all'input dell'utente. Utilizzando gli attributi di elemento, ad esempio ID e nomi, i programmatori possono inserire contenitori ed elementi (ad esempio tabelle, righe e celle di tabella), sezioni del documento HTML (ad esempio elementi DIV).
Istruzioni
1
Aprire un editor di testo e creare un file HTML che include un tag "< html >", un tag "< head >", un tag "< / head >", un "< body >" tag e un tag "< / body >", e un "< / html >" tag. Nome del file tableDiv.html.
2
Modificare tableDiv.html e aggiungere due delimitatori di script ("< script >" e "< / script >") tra la pagina "< head >" e "< / head >" tag. Assegnare un attributo "type" per il primo tag < script > e impostarlo su "text/javascript". Impostando l'attributo type su "text/javascript" dice al browser di interpretare qualsiasi testo inserito tra i delimitatori < script > come JavaScript.
3
Aggiungere una funzione JavaScript tra tableDiv.html "< script >" e "< / script >" tag. Nome della funzione "CreateTable ()" e il nome seguito da due parentesi graffe ("{" e "}").
4
Aggiungere una variabile denominata "tableId" tra l'apertura della funzione e chiudere la parentesi graffe. Utilizzare il metodo document.getElementById() per recuperare un riferimento all'elemento che conterrà la tabella, o "myTable". Assegnare l'elemento alla variabile tableId.
5
Impostare lo stile della variabile tableId a "bloccare". Questo stile indica che la tabella creata deve essere generata in una finestra di blocco.
6
Aggiungere un tag "< div >" tra di createTable.html "< body >" e "< body >" tag. Impostare il valore di "id" del tag a "myTable" e impostare l'attributo del tag "style" su "display: none". Questo stile indica che la casella blocca di div non deve essere generato. Chiudi il "< / div >" tag.
7
Aggiungere un tag "< table >" tra createTable.html "< div >" e "< / div >" tag e assegnare alla tabella un "bordo = 1" attributo. Aggiungere due insiemi di tag "< tr >" e due set di tag "< td >" tra "< table >" Apri e Chiudi "< / tavolo >" tag. Inserire il testo "delle cellule 1" tra il primo tag del set di "< td >" e inserire il testo "cell 2" tra il secondo set di tag "< td >".
8
Aggiungere un tag "< button >" immediatamente dopo il tag div stretta ("< / div >"). Assegnare un evento "onClick" al pulsante e impostare il valore dell'evento al "javascript:createTable()". Questo valore indica che la funzione CreateTable () deve essere chiamata quando il pulsante è selezionato. Dare il pulsante il testo "Fare clic per aggiungere la tabella al DIV" e chiudere il tag "< / button >". Dopo aver seguito questi passaggi (1-8), createTable.html avrà un aspetto come illustrato nell'esempio riportato di seguito. Salvare e chiudere createTable.html.
< html >
< head >
< script type = "text/javascript" >
CreateTable () funzione
{
var tableId = document.getElementById('myTable');
tableId.style.display = 'bloccare';
}
< / script >
< / head >
< corpo >
< div id = "myTable" style = "display: none" >
< tavolo border = "1" >
cella < tr >< td > < /td >< /tr > 1
cella < tr >< td > < /td >< /tr > 2
< / tabella >
< / div >
< pulsante onClick="javascript:createTable();" > Clicca per aggiungere la tabella al DIV < / button >
< / body >
< / html >
9
CreateTable.html aperto in un browser web. Fare clic sul pulsante "Clicca per aggiungere la tabella al DIV" per creare la tabella all'interno del "myTable" DIV.
Consigli & Avvertenze
- Metodi alternativi per l'accesso a oggetti dell'elemento sono i document.getElementByTagName() e i metodi di document.getElementByName(). Fogli di stile CSS possono avvantaggiarsi del riferimento "Identificativo" per gli elementi di stile nelle pagine web.
- La proprietà "display: block" non è l'unico modo per visualizzare la casella generata con elementi. Altre strutture includono inline, voce di elenco, inline-block e altri.
- Cambiando il tipo di visualizzazione per un elemento cambia il metodo di visualizzazione elementi solo, non l'elemento stesso.