Hoe een tabel in HTML weer te geven met Ajax

Ajax werkt met HTML-tabellen en XML-gegevens om een ​​lijst met records weer te geven voor uw weblezers. In plaats van elk HTML-element te definiëren, kunt u met Ajax tabelfuncties oproepen om records in rijen en kolommen weer te geven zonder de code voor de tabelelementen te schrijven. Ajax doorloopt elk gegevensitem uit XML en u kiest of u de gegevens wilt weergeven of verbergen.

1.

Klik met de rechtermuisknop op het HTML- of Ajax-bestand dat u wilt gebruiken om de tabel weer te geven. Open het XML-bestand dat u wilt gebruiken om de gegevens voor de tabel op te halen. De volgende Ajax-instructie opent een XML-bestand met een lijst met klanten:

nieuw Ajax.Request ('customers.xml', {methode: 'get', onSuccess: functie (transport)}

2.

Krijg een lijst met tags en de gegevens van de tags. De volgende Ajax-code laadt de gegevens die u gebruikt om door te lussen en de tabel te maken:

var klanten = transport.responseXML.getElementsByTagName ('klant');

3.

Maak de "for" -lus die door elk XML-element wordt herhaald. De volgende code laat zien hoe u een "voor" -lus in Ajax kunt instellen:

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

4.

Maak een tabelrij en cel om uw gegevens weer te geven. De volgende code maakt de rij- en celvariabelen die de tabelstructuur instellen:

var rij = $ ('klanten'). insertRow (-1); var cell = row.insertCell (-1);

5.

Voeg de gegevens toe aan de tabelcel. De volgende code voegt de naam van de klant toe aan de cel:

cell.innerHTML = klant;