Sådan vises en tabel i HTML ved hjælp af Ajax

Ajax arbejder med HTML-tabeller og XML-data for at vise en liste over poster til dine weblæsere. I stedet for at definere hvert HTML-element kan Ajax du ringe til tabelfunktioner for at vise poster i rækker og kolonner uden at skrive koden til tabelelementerne. Ajax sløjfer gennem hvert dataelement fra XML, og du vælger, om dataene skal vises eller skjules.

1.

Højreklik på den HTML- eller Ajax-fil, du vil bruge til at vise tabellen. Åbn den XML-fil, du vil bruge til at hente dataene til tabellen. Den følgende Ajax-erklæring åbner en XML-fil med en liste over kunder:

nye Ajax.Request ('customers.xml', {method: 'get', onSuccess: funktionen (transport)}

2.

Få en liste over tags og tags data. Den følgende Ajax-kode indlæser de data, du bruger til at løbe igennem og oprette tabellen:

var customers = transport.responseXML.getElementsByTagName ('kunde');

3.

Opret "for" -sløjfen, der gentager gennem hvert XML-element. Følgende kode viser, hvordan du opretter en "for" -sløjfe i Ajax:

for (var i = 0; i <customers.length; i ++) {}

4.

Opret en tabelrække og celle for at vise dine data. Følgende kode opretter række og cellevariabler, der opretter bordstrukturen:

var row = $ ('kunder'). insertRow (-1); varcelle = row.insertCell (-1);

5.

Tilføj dataene til bordets celle. Følgende kode tilføjer kundens navn til cellen:

cell.innerHTML = kunde;