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入门第一课 jQuery选择符
Mar 14 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
用js实现放大镜效果
Oct 28 Javascript
antd form表单数据回显操作
Nov 02 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将HTML转换成文本的实现代码
2015/01/21 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
python相似模块用例
2016/03/04 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python绘制直方图和密度图的实例
2019/07/08 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python 解析简单的XML数据
2020/07/24 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
一套VC试题
2015/01/23 面试题
生产内勤岗位职责
2013/12/07 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
房屋转让协议书
2014/10/18 职场文书