javascript XML數據顯示為HTML一例

更新時間：2008年12月23日 16:00:06 作者：

通過Javascript把xml轉換成html格式輸出一列

person.htm:

<html> 
<body> 
<script type="text/javascript"> 
var xmlDoc=null; 
if (window.ActiveXObject) 
{ 
// for IE 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
} 
else if (document.implementation.createDocument) 
{ 
//for Mozilla, Firefox, Opera, 
xmlDoc=document.implementation.createDocument("","",null); 
} 
else 
{ 
alert('Your browser cannot handle this script'); 
} 
if (xmlDoc!=null) 
{ 
xmlDoc.async=false; 
xmlDoc.load("person.xml"); 
document.write("<table border='1'>"); 
var x=xmlDoc.getElementsByTagName("person"); 
for (i=0;i<x.length;i++) 
{ 
document.write("<tr>"); 
document.write("<td>"); 
document.write( 
x[i].getElementsByTagName("myname")[0].childNodes[0].nodeValue); 
document.write("</td>"); 
document.write("<td>"); 
document.write( 
x[i].getElementsByTagName("myid")[0].childNodes[0].nodeValue); 
document.write("</td>"); 
document.write("</tr>"); 
} 
document.write("</table>"); 
} 
</script> 
</body> 
</html>

person.xml:

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<root> 
<person> 
<myname>chwuweig</myname> 
<myid>123456</myid> 
</person> 
<person> 
<myname>cig</myname> 
<myid>526636</myid> 
</person> 
<person> 
<myname>chwg</myname> 
<myid>524216</myid> 
</person> 
</root>

您可能感興趣的文章:

ES6入門教程之let和const命令詳解
最近做項目的過程中，使用到了ES6，因為之前很少接觸，所以使用起來還不夠熟悉。通過學習網上的教程后覺著有必要整理下遇到的let和const命令，所以這篇文章主要給大家介紹了ES6中l(wèi)et和const命令的相關資料，需要的朋友可以參考下。
2017-05-05
js使用文件流下載csv文件的實現(xiàn)方法
這篇文章主要給大家介紹了關于js使用文件流下載csv文件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-07-07
JS中如何輕松遍歷對象屬性的方式總結
這篇文章主要給大家總結介紹了關于在JS中如何輕松遍歷對象屬性的方式，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-08-08
javascript實時顯示北京時間的方法
這篇文章主要介紹了javascript實時顯示北京時間的方法,涉及javascript操作時間顯示的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
詳解在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導入)
這篇文章主要介紹了在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導入),本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
關于axios返回空對象的問題解決
這篇文章主要給大家介紹了關于axios返回空對象的問題解決方法，文中介紹的非常詳細，相信對大家學習或者使用axios具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
javascript彈出窗口中增加確定取消按鈕
本文給大家分享的是在ECShop的項目中使用到的一個小功能，使用JavaScript實現(xiàn)彈出窗口中增加確定取消按鈕，有需要的小伙伴可以參考下
2016-06-06
javascript中創(chuàng)建對象的幾種方法總結
以下幾種，是javascript中最常用的創(chuàng)建對象的方式。初學者看到后，可能會暈掉，甚至會覺得擔心。其實完全不用擔心，這些種方式，只需要掌握一兩種，對其他的幾種只需要理解就好了
2013-11-11
一篇文章搞定JavaScript類型轉換(面試常見)
這篇文章主要介紹了一篇文章搞定JavaScript類型轉換(面試常見)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實際上，二者是不同的東西，屬于不同的范疇，本文就詳細的介紹一下JS中attribute和property的區(qū)別，感興趣的可以了解一下
2022-02-02