JavaScript实现将xml转换成html table表格的方法


Posted in Javascript onApril 17, 2015

本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下:

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;
}

下面是一个简单的示例用法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>Untitled Page</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)
{
 try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  return xmlDoc;
  } 
 catch(e)
  {
  try // Firefox, Mozilla, Opera, etc.
  {
  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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
JavaScript实现的简单幂函数实例
Apr 17 #Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 #Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 #Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python实现的选择排序算法示例
2017/11/29 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
python GUI计算器的实现
2020/10/09 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
护士在校生自荐信
2014/02/01 职场文书
小学生家长评语大全
2014/02/10 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
教师党员整改措施
2014/10/24 职场文书
亲属关系公证书样本
2015/01/23 职场文书
无保留意见审计报告
2015/06/05 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js