js 將xml轉換為table表格簡單程式碼例項
下面分享一段程式碼例項,它實現了將xml檔案轉換為table表格格式的功能。
這裡不介紹它的實現過程,感興趣的朋友可以自己做一下分析。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>螞蟻部落</title> </head> <body> <script type="text/javascript"> function ConvertToTable(targetNode){ // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml document targetNode = targetNode.childNodes[0]; // first we need to create headers var columnCount = targetNode.childNodes[0].childNodes.length; var rowCount = targetNode.childNodes.length // name for the table var myTable = document.createElement("table"); myTable.border = 1; myTable.borderColor ="green"; var firstRow = myTable.insertRow(); var firstCell = firstRow.insertCell(); firstCell.colSpan = columnCount; firstCell.innerHTML = targetNode.nodeName; // name for the columns var secondRow = myTable.insertRow(); for(var i=0;i<columnCount;i++){ var newCell = secondRow.insertCell(); newCell.innerHTML = targetNode.childNodes[0].childNodes[i].nodeName; } // now fill the rows with data for(var i2=0;i2<rowCount;i2++){ var newRow = myTable.insertRow(); for(var j=0;j<columnCount;j++){ var newCell = newRow.insertCell(); newCell.innerHTML = targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue; } } //i prefer to send it as string instead of a table object return myTable.outerHTML; } function loadXmlDocFromString(text){ //Internet Explorer try { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); return xmlDoc; } catch(e){ // Firefox, Mozilla, Opera, etc. try{ parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); return xmlDoc; } catch(e){ alert(e.message); return; } } } var myXml = '<TableName> \ <firstRow> \ <field1>1</field1> \ <field2>2</field2> \ </firstRow> \ <firstRow> \ <field1>3</field1> \ <field2>4</field2> \ </firstRow> \ </TableName>'; var myDoc = loadXmlDocFromString(myXml); document.write( ConvertToTable(myDoc)); </script> </body> </html>
相關文章
- jQuery table表格隔行換色程式碼例項jQuery
- table表格美化程式碼例項
- table細線表格例項程式碼
- 將RAC軟體轉換為單例項軟體單例
- 簡單程式碼:將回歸特徵轉換為分類特徵特徵
- XML節點自動生成簡單例項XML單例
- Python將xml格式轉換為json格式PythonXMLJSON
- 淡入淡出效果簡單程式碼例項
- table表頭分組程式碼例項
- 如何將獨立例項轉換成叢集例項EU
- 快速將log4j.xml轉換為logback.xmlXML
- [js常用]百度將文字轉化為語音例項JS
- layui將table轉化表單顯示(即table.render轉為表單展示)UI
- js將秒轉換為時分秒JS
- html實現簡單ListViews效果的例項程式碼HTMLView
- Python訪問小程式簡單方法程式碼例項詳解Python
- css table細線表格程式碼CSS
- 將ES6程式碼轉換為ES5程式碼
- python hex轉ascii轉換Python程式碼的簡單方法PythonASCII
- 將物件解析為JSON資料和將JSON資料解析為物件的簡單例項物件JSON單例
- Java 將HTML轉為XMLJavaHTMLXML
- JS 預編譯程式碼例項分析JS編譯
- js圖片切換例項JS
- Java中將XML轉換為PDF的兩種辦法JavaXML
- keras轉tensorflow lite【方法二】直接轉:簡單模型例項Keras模型
- 透過程式碼例項簡單瞭解Python sys模組Python
- 簡單介紹正規表示式拆分url例項程式碼
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- C# 將HTML轉為XMLC#HTMLXML
- C# 將Excel轉為XMLC#ExcelXML
- JavaScript 表單驗證程式碼例項JavaScript
- Python實現簡單網頁圖片抓取完整程式碼例項Python網頁
- div前後翻轉效果程式碼例項
- CSS3旋轉效果程式碼例項CSSS3
- phpqrcode生成動態二維碼簡單例項PHP單例
- python3將變數輸入的簡單例項Python變數單例
- 【筆記】嵩天.Python語言程式設計.完成兩個簡單例項(溫度轉換和繪圖)筆記Python程式設計單例繪圖
- simplexml_load_string 將xml轉換成物件XML物件
- opengl簡單入門例項