Ajax Kullanarak HTML'de Tablo Görüntüleme

Ajax, Web okuyucularınızın kayıt listesini görüntülemek için HTML tabloları ve XML verileriyle çalışır. Her HTML öğesini tanımlamak yerine, Ajax, tablo öğelerinin kodunu yazmadan kayıtları satırlar ve sütunlarda görüntülemek için tablo işlevlerini çağırmanıza izin verir. Ajax, XML'deki her veri öğesi arasında dolaşır ve verilerin görüntülenip görüntülenmeyeceğini seçersiniz.

1.

Tabloyu görüntülemek için kullanmak istediğiniz HTML veya Ajax dosyasını sağ tıklayın. Tablodaki verileri almak için kullanmak istediğiniz XML dosyasını açın. Aşağıdaki Ajax bildirimi müşteri listesini içeren bir XML dosyası açar:

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

2.

Etiketlerin ve etiketlerin verilerinin bir listesini alın. Aşağıdaki Ajax kodu, döngü oluşturmak ve tabloyu oluşturmak için kullandığınız verileri yükler:

var var müşteriler = transport.responseXML.getElementsByTagName ('customer');

3.

Her XML öğesinde yinelenen "for" döngüsünü oluşturun. Aşağıdaki kod Ajax'ta "for" döngüsünün nasıl ayarlandığını gösterir:

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

4.

Verilerinizi görüntülemek için bir tablo satırı ve hücre oluşturun. Aşağıdaki kod, tablo yapısını ayarlayan satır ve hücre değişkenlerini oluşturur:

var row = $ ('müşteriler'). insertRow (-1); var hücre = row.insertCell (-1);

5.

Verileri tablonun hücresine ekleyin. Aşağıdaki kod, müşteri adını hücreye ekler:

cell.innerHTML = müşteri;