Hvordan lage dynamiske tabeller i Java Script

Tabeller er formatert objektene som ligger på websider som tillater deg å legge ut lister over data. Tabellen formaterer data som vises for brukeren, slik at det skaper en bedre layout for Web-siden. Du kan lage disse tabellene ved hjelp av Javascript den. Javascript Den legger til en metode for dynamisk å legge bordene til siden din. Disse tabellene endres når brukeren åpner ulike data eller bruker en annen kobling for å navigere til siden.

Bruksanvisning

1 Lag Javascript blokken. Javascript blokken ligger i & quot; & lt; head & gt; & quot; og & quot; & lt; / head & gt; & quot; kodene i HTML-koden. Plasser følgende kode i HTML-filen:

& Lt; script type = & quot; text / javascript & quot; & gt; & Lt; / script & gt;

2 Lag start- og sluttkoder. Disse kodene er strengvariabler som inneholder HTML-koden for tabellene. Følgende kode oppretter en start- og sluttJavaScript variabel:

STARTTAG = & quot; & lt; TABLE id = & # 039; table1 & # 039; & gt; & quot;
ENDTAG = & quot; & lt; / TBODY & gt; & lt; / TABLE & gt; & quot;

3 Lag dine tabellrader. HTML-koden for en tabell rad er & quot; & lt; tr & gt; & quot; stikkord. Innenfor & quot; & lt; tr & gt; & quot; tag er & quot; & lt; td & gt; & quot; tag som betegner en tabellcelle. Følgende kode oppretter en variabel som inneholder to rader:

tableRows = & quot; & lt; tr & gt; & lt; td & gt; Min første rad & lt; / td & gt; & lt; / tr & gt; & quot;
tableRows = tableRows + & quot; & lt; tr & gt; & lt; td & gt; Min andre rad & lt; / td & gt; & lt; / tr & gt; & quot;

4 Legg bordet ditt til en & quot; & lt; div & gt; & quot; tag i HTML-koden. Dette kan være en hvilken som helst div tag på siden din. I dette eksemplet er den nye dynamiske tabellen vises i & quot; MyTable & quot; div. Følgende kode viser deg hvordan du legger til en dynamisk tabell til din side:

myTable.innerHTML = STARTTAG + tableRows + ENDTAG

& Quot; innerhtml & quot; Metoden gjør det mulig å legge til HTML-kode dynamisk til siden din.