Bir XML tablosunu verilen sayfa üzerinde listelemeye yarayan javascript kodu alternatifidir.
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>XML Tablo Listele - Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" id="listele-button">XML Tablo Listele</button>
<!-- Xml içerikleri bu tabloda listelenecek. -->
<table id="cd-liste" border="1"></table>
<script src="script.js"></script>
</body>
</html
script.js
document.getElementById('listele-button').addEventListener('click', XmlTabloListele);
function XmlTabloListele() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
//--------------------------------------------------
//readyState = 4
//İşlem tamamlandı, talep hazır anlamına geliyor.
//status = 200
//Sayfa bulundu, her şey tamam, sıkıntı yok anlamında.
//--------------------------------------------------
if(xhr.readyState == 4 && xhr.status == 200) {
//--------------------------------------------------
//cd_catalog.xml dosyasından bir
//responseXML sonucu alıyoruz. Bunu da
//xml adında bir değişkene atıyoruz.
//--------------------------------------------------
var xml = xhr.responseXML;
//--------------------------------------------------
//Listelemeyi neyin içinde yapacağımızı belirliyoruz.
//Koleksiyon gerekiyor. Dikkat edilirse bir "document"
//üzerinden değil, "xml" değişkeni üzerinden bir şeyler
//alıyoruz. Şimdi CD etiketli elementleri listeliyoruz.
//--------------------------------------------------
var cds = xml.getElementsByTagName('CD');
//--------------------------------------------------
//satirlar değişkeni oluşturduk ve ilk olarak XML
//tablosundaki başlıkları ekliyoruz.
//--------------------------------------------------
var satirlar = "<tr>" +
"<th>Title</th>" +
"<th>Artist</th>" +
"<th>Country</th>" +
"<th>Company</th>" +
"<th>Price</th>" +
"<th>Year</th>" +
"</tr>";
//--------------------------------------------------
//Döngü kullanarak tablodaki her satır için element
//grubu oluşturuyoruz ve bunu satirlar değişkenine
//ekletiyoruz.
//--------------------------------------------------
for (var i = 0; i < cds.length; i++) {
var title = cds[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue;
var artist = cds[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue;
var country = cds[i].getElementsByTagName('COUNTRY')[0].childNodes[0].nodeValue;
var company = cds[i].getElementsByTagName('COMPANY')[0].childNodes[0].nodeValue;
var price = cds[i].getElementsByTagName('PRICE')[0].childNodes[0].nodeValue;
var year = cds[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue;
var satir = "<tr>" +
"<td>"+ title +"</td>" +
"<td>"+ artist +"</td>" +
"<td>"+ country +"</td>" +
"<td>"+ company +"</td>" +
"<td>"+ price +"</td>" +
"<td>"+ year +"</td>" +
"</tr>";
satirlar += satir;
}
//--------------------------------------------------
//Tabloyu oluşturduk. Şimdi ilgili sayfada "cd-liste"
//id değerine sahip elemente bu tablo satırlarını ekliyoruz.
//--------------------------------------------------
document.getElementById('cd-liste').innerHTML += satirlar;
}
};
xhr.open('GET', 'cd_catalog.xml', true);
xhr.send();
}
style.css
button {
padding: 10px;
background-color: #ddd;
border-color: #aaa;
margin-bottom: 5px;
}
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir