Nwlapcug.com


Come creare una tabella in un Div in Javascript

Come creare una tabella in un Div in Javascript


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.