如何使用 Javascript 在 HTML 表中顯示 XML 數據？ [等候接聽]
[英]How do I display XML data in a HTML table using Javascript? [on hold]
問題描述
我正在嘗試創建一個 HTML 文檔，該文檔將讀取 XML 文件，並使用該數據填充表，使用 javascript。
我已經嘗試在網上遵循一些示例，但由於某種原因，我無法讓它工作。
預期結果應在表格中跨多列和多行顯示讀數。 我得到的只是一個空白網頁，根本沒有呈現任何數據。
HTML 代碼：
<!DOCTYPE html>
<html>
<head>
<title>Diabetes Readings</title>
<script>
</script>
</head>
<body>
<p id="out">Nothing</p>
<table id="readings">
<tr><td>Hello</td></tr>
</table>
<script>
</script>
</body>
XML 代碼：
<?xml version="1.0" encoding="UTF-8"?>
<readings>
<entry>
<date>15-10-19</date>
<time>1236</time>
<bs>12.9</bs>
<chk>No</chk>
<ket>1</ket>
<food>Sandwich</food>
<carb>37</carb>
<ins_carb>4</ins_carb>
<ins_corr>2</ins_corr>
<ins_ket>1</ins_ket>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>1703</time>
<bs>10.7</bs>
<chk>No</chk>
<ket>0</ket>
<ins_corr>1</ins_corr>
<ins_ket>1</ins_ket>
<ins_tot>2</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>1914</time>
<bs>5.5</bs>
<chk>Yes</chk>
<ket>0</ket>
<food>Pasta bake</food>
<carb>41</carb>
<ins_carb>4</ins_carb>
<ins_tot>4</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>2143</time>
<bs>9.4</bs>
<chk>Yes</chk>
<ket>0</ket>
</entry>
<entry>
<date>16-10-19</date>
<time>0049</time>
<bs>6.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>16-10-19</date>
<time>0921</time>
<bs>14.6</bs>
<chk>No</chk>
<ket>0</ket>
<food>Toast w/ butter and jam</food>
<carb>39</carb>
<ins_carb>4</ins_carb>
<ins_corr>3</ins_corr>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>16-10-19</date>
<time>1415</time>
<bs>9.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>16-10-19</date>
<time>2040</time>
<bs>10.1</bs>
<chk>No</chk>
<food>Chicken nuggets & chips</food>
<carb>73</carb>
<ins_carb>7</ins_carb>
<ins_corr>1</ins_corr>
<ins_tot>8</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>0023</time>
<bs>8.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>17-10-19</date>
<time>0859</time>
<bs>17.1</bs>
<chk>No</chk>
<ket>0</ket>
<food>Cheerios w/ milk</food>
<carb>43</carb>
<ins_corr>3</ins_corr>
<ins_carb>4</ins_carb>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>1215</time>
<bs>10.0</bs>
<chk>No</chk>
<food>Scrambled egg w/ 2 toast</food>
<carb>34</carb>
<ins_carb>3</ins_carb>
<ins_corr>1</ins_corr>
<ins_tot>4</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>1903</time>
<bs>13.0</bs>
<chk>No</chk>
<food>Tortellini w/ sauce</food>
<carb>111</carb>
<ins_carb>11</ins_carb>
<ins_corr>2</ins_corr>
</entry>
<entry>
<date>18-10-19</date>
<time>0019</time>
<bs>13.2</bs>
<ins_corr>2</ins_corr>
</entry>
<entry>
<date>18-10-19</date>
<time>0855</time>
<bs>13.9</bs>
<ins_corr>2</ins_corr>
<ins_carb>4</ins_carb>
</entry>
<entry>
<date>18-10-19</date>
<time>1316</time>
<bs>9.8</bs>
<chk>Yes</chk>
<food>2 x chicken caesar wrap</food>
<carb>92.6</carb>
<ins_carb>14</ins_carb>
</entry>
<entry>
<date>18-10-19</date>
<time>2013</time>
<bs>14.0</bs>
<chk>No</chk>
<ket>0</ket>
<food>Pizza</food>
<carb>91.2</carb>
<ins_carb>9</ins_carb>
<ins_corr>3</ins_corr>
</entry>
</readings>
Javascript 代碼：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("get","diabetes.xml",true);
xhttp.send();
function myFunction(xml) {
var i;
var xmlDOC = xml.responseXML;
var table = "<tr><th>Date</th><th>Time</th><th>Reading</th><th>Check</th><th>Ketone</th><th>Food</th><th>Carbs></th><th>Insulin (corr)</th><th>Insulin (carbs)</th><th>Insulin (ketones)</th><th>Insulin (total)</th></tr>";
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++)
{
table += "<tr><td>" + x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("bs")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("chk")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ket")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("food")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("carb")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_corr")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_carb")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_ket")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_tot")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("out").innerHTML = table;
}
1 個解決方案
解決方案1
0 2019-10-19 00:41:13
希望我的片段可以以任何方式幫助您。 干杯！
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Diabetes Readings</title>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("get", "diabetes.xml", true);
xhttp.send();
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Date</th><th>Time</th><th>Reading</th><th>Check</th><th>Ketone</th><th>Food</th><th>Carbs</th><th>Insulin (corr)</th><th>Insulin (carbs)</th><th>Insulin (ketones)</th><th>Insulin (total)</th></tr>";
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++) {
date = (x[i].getElementsByTagName("date")[0]) ?
x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue :
"-";
time = (x[i].getElementsByTagName("time")[0]) ?
x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue :
"-";
bs = (x[i].getElementsByTagName("bs")[0]) ?
x[i].getElementsByTagName("bs")[0].childNodes[0].nodeValue :
"-";
chk = (x[i].getElementsByTagName("chk")[0]) ?
x[i].getElementsByTagName("chk")[0].childNodes[0].nodeValue :
"-";
ket = (x[i].getElementsByTagName("ket")[0]) ?
x[i].getElementsByTagName("ket")[0].childNodes[0].nodeValue :
"-";
food = (x[i].getElementsByTagName("food")[0]) ?
x[i].getElementsByTagName("food")[0].childNodes[0].nodeValue :
"-";
carb = (x[i].getElementsByTagName("carb")[0]) ?
x[i].getElementsByTagName("carb")[0].childNodes[0].nodeValue :
"-";
ins_corr = (x[i].getElementsByTagName("ins_corr")[0]) ?
x[i].getElementsByTagName("ins_corr")[0].childNodes[0].nodeValue :
"-";
ins_carb = (x[i].getElementsByTagName("ins_carb")[0]) ?
x[i].getElementsByTagName("ins_carb")[0].childNodes[0].nodeValue :
"-";
ins_ket = (x[i].getElementsByTagName("ins_ket")[0]) ?
x[i].getElementsByTagName("ins_ket")[0].childNodes[0].nodeValue :
"-";
ins_tot = (x[i].getElementsByTagName("ins_tot")[0]) ?
x[i].getElementsByTagName("ins_tot")[0].childNodes[0].nodeValue :
"-";
table += "<tr><td>" + date + "</td><td>" + time + "</td><td>" + bs + "</td><td>" + chk + "</td><td>" + ket + "</td><td>" + food + "</td><td>" + carb + "</td><td>" + ins_corr + "</td><td>" + ins_carb + "</td><td>" + ins_ket + "</td><td>" + ins_tot + "</td></tr>";
}
document.getElementById("readings").innerHTML = table;
}
</script>
</head>
<body>
<table id="readings" border="1"></table>
</body>
如何將 JSON 文件數據顯示到 HTML 表中（僅使用 JavaScript，而不是 jQuery）
[英]How do I display JSON file data into HTML table (using JavaScript only, not jQuery)
我如何導入帶有 JavaScript 的 xml 標簽以在 html 中顯示圖像
[英]How do i import a xml tag with JavaScript to display an image in html
如何遍歷 XML 文件並使用 JavaScript 在 HTML 網頁中顯示數據？
[英]How can I iterate over an XML file and display the data in a HTML web page using JavaScript?
如何使用純JavaScript將XML文件中的數據解析為HTML表？
[英]How can I parse data from XML file into HTML table using pure JavaScript?
如何從存儲在我 PC 上的文件中獲取 XML 數據並使用 javascript 以 HTML 格式填充表格？
[英]How can I fetch XML Data from a file stored on my PC and populate a table in HTML using javascript?
使用JavaScript解析xml文件時，如何查找HTML5的“數據”屬性？
[英]How do I look up the HTML5 'data' attribute when parsing an xml file using Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何在HTML表中顯示此XML數據？
如何將 JSON 文件數據顯示到 HTML 表中（僅使用 JavaScript，而不是 jQuery）
我如何導入帶有 JavaScript 的 xml 標簽以在 html 中顯示圖像
如何遍歷 XML 文件並使用 JavaScript 在 HTML 網頁中顯示數據？
使用JavaScript在HTML中顯示XML數據
如何使用純JavaScript將XML文件中的數據解析為HTML表？
如何從存儲在我 PC 上的文件中獲取 XML 數據並使用 javascript 以 HTML 格式填充表格？
如何使用Javascript顯示XML文檔中的變量？
使用JavaScript / jQuery在HTML表格中顯示數據
使用JavaScript解析xml文件時，如何查找HTML5的“數據”屬性？
相關標簽