[英]How to import data from XML file to HTML table
我得到了一個看起來像這樣的 XML 文件。 我想制作一個按順序包含這些數據的 HTML 表格。 知道怎么做嗎? 我對javascript知之甚少。 現在當我點擊按鈕時:
我收到一個錯誤:
javascript.js:16 未捕獲的類型錯誤:無法讀取 null 的屬性“getElementsByTagName”
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "examData.xml", true);
http.send();
}
function myFunction(xml){
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Date</th><th>Type of exam</th><th>Course</th><th>Semester</th><th>Students</th><th>From of exam</th><th>Room</th></tr>";
var x = xmlDoc.getElementsByTagName("exam");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue + "</td></tr>";
x[i].getElementsByTagName("course")[0].childNodes[0].nodeValue + "</td></tr>";
x[i].getElementsByTagName("semester")[0].childNodes[0].nodeValue + "</td></tr>";
x[i].getElementsByTagName("students")[0].childNodes[0].nodeValue + "</td></tr>";
x[i].getElementsByTagName("form")[0].childNodes[0].nodeValue + "</td></tr>";
x[i].getElementsByTagName("room")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<exams>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
<exam>
<date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
</exam>
</exams>
<h1>Our first project</h1>
<button type="button" onclick="loadDoc()">Get Table</button>
<br><br>
<table id="demo"></table>
你必須使用 AJAX:
類似的東西:
const myTable = document.getElementById('demo')
, myXMLfile = 'examData.xml';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (4 === this.readyState) { /* DONE */
if (200 === this.status) { /* LOADING */
fctGetXML(this);
}
else {
console.warn("error %d on loading file: %s !", this.status, myXMLfile);
}
}
};
function loadDoc() {
xmlhttp.open("GET", myXMLfile, true);
xmlhttp.send();
}
function fctGetXML(xml) {
let xmlDoc = xml.responseXML;
xmlDoc.querySelectorAll('exam').forEach(exam => {
let nRow = myTable.insertRow(-1) , rCell = 0;
nRow.insertCell(rCell++).textContent = exam.querySelector('date').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('type').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('course').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('semester').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('students').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('form').textContent;
nRow.insertCell(rCell++).textContent = exam.querySelector('room').textContent;
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.