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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 如何在JS中实现相互转换XML和JSON

    开发中有时候会遇到XML和JSON相互转换,要求在JS中使用,网上找了好多,竟然每一个好用的,要么缺胳膊少腿,要么词不达意,太没天理了,果断自己实现一个. JSON与XML的区别比较 1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. XML使用DTD(document type definition)文档类

  • php实现xml与json之间的相互转换功能实例

    本文实例讲述了php实现xml与json之间的相互转换功能.分享给大家供大家参考,具体如下: 用php实现xml与json之间的相互转换: 相关函数请查看php手册. 一.参考xml如下 <?xml version="1.0" encoding="UTF-8"?> <humans> <zhangying> <name>张三</name> <sex>男</sex> <old>

  • Jsp结合XML+XSLT将输出转换为Html格式

    我们知道 XML+XSLT就可以直接输出到支持XML的浏览器上,如IE 5.0以上,但是,我们还要考虑到有不少浏览器不直接支持XML,在这种情况下,我们需要在服务器上进行转换成html输出到浏览器,这种临时过渡办法恐怕要在一段时间内一直要使用. 使用Jsp 加上tablib标识库,我们可以完成这种转换. 著名open source项目组jakarta.apache.org推出的系列标识库中,就有这个功能的tanglib:http://jakarta.apache.org/taglibs/doc/

  • js字符串转换成xml对象并使用技巧解读

    js字符串转换成xml对象并使用技巧解读

    在java端将字符串转化为xml对象可以使用DocumentHelper.parseText(xmlReturn).getRootElement(); 在js中同样有方法可以将字符串转化为xml对象,可以使用如下函数 以下是引用片段: 复制代码 代码如下: function createXml(str){ if(document.all){ var xmlDom=new ActiveXObject("Microsoft.XMLDOM") xmlDom.loadXML(str) retu

  • C# XML与Json之间相互转换实例详解

    C# XML与Json之间相互转换实例详解

    对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 复制代码 代码如下: string xml = @"<?xml version=""1.0"" standalone=""no""?>                             <root>                   

  • js转换对象为xml

    本代码解决这两个问题: 1.已知js对象没有类名概念,所以转换时要手动指定顶级节点名称 2.还有数组内的元素如果是对象类型,需要配置此数组元素的节点名称 var XmlHelper=function(){ var _arrayTypes={} var _self=this; /* *转换对象为xml *@obj 目标对象 *@rootname 节点名称 *@arraytypes 配置数组字段子元素的节点名称 */ this.parseToXML=function(obj,rootname,arr

  • C#中使用JSON.NET实现JSON、XML相互转换

    官方 JSON.NET 地址 http://james.newtonking.com/pages/json-net.aspx XML TO JSON string xml = @"<?xml version=""1.0"" standalone=""no""?> <root> <person id=""1""> <name>Ala

  • 详解XML,Object,Json转换与Xstream的使用

    详解XML,Object,Json转换与Xstream的使用 1.Xstream的特点: 这里直接引用Xstream官方的叙述: 灵活易用:在更高的层次上提供了简单.灵活.易用的统一接口,用户无需了解项目的底层细节 无需映射:大多数对象都可以在无需映射的情况下进行序列化与反序列化的操作 高速稳定:设计时力求达到的最重要的指标是解析速度快.占用内存少,以使之能够适用于大的对象处理或是对信息吞吐量要求高的系统 清晰易懂:项目采用reflection机制得到无冗余信息的XML文件.所生成 的XML文件

  • Python 提取dict转换为xml/json/table并输出的实现代码

    核心代码: #!/usr/bin/python #-*- coding:gbk -*- #设置源文件输出格式 import sys import getopt import json import createDict import myConToXML import myConToTable def getRsDataToDict(): #获取控制台中输入的参数,并根据参数找到源文件获取源数据 csDict={} try: #通过getopt获取参数 opts,args=getopt.geto

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

    本文实例讲述了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 documen

  • ASP.NET使用xslt将xml转换成Excel

    序: 最近在给客户做一个管理系统的时候,客户提出要将查询结果导出到Excel.对于还是实习生的我倍感压力,于是找了点资料.网上有个示例,其中方法十分简单.于是照猫画虎,把方法和心得与大家分享.OK,Let`s go 第一步: 创建一个Excel文件(就是 普通的Excel),在第一个单元格输入"city",然后选择"另存为",此时弹出保存窗口.注意:将保持格式选择为"XML 表格(*.xml)",点击保存.完毕后用记事本打开这个Excel文件.你

  • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

  • Codeigniter通过SimpleXML将xml转换成对象的方法

    本文实例讲述了Codeigniter通过SimpleXML将xml转换成对象的方法.分享给大家供大家参考.具体分析如下: SimpleXML是一个php扩展,有了它可以非常容易的操作xml文件 class CI_ManipulateXML { var $xml=''; function CI_ManipulateXML($xmlcontent) { $this->xml=$xmlcontent; } function ConvertXML() { try { $xmlobject = new S

  • JavaScript将字符串转换成字符编码列表的方法

    本文实例讲述了JavaScript将字符串转换成字符编码列表的方法.分享给大家供大家参考.具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 Array.map('foo', function(x) { return String.charCodeAt(x) }) // is [112,111,111] 方法2: JavaScript 1.7 [ String.charCodeAt(x) for ea

  • JavaScript将当前时间转换成UTC标准时间的方法

    本文实例讲述了JavaScript将当前时间转换成UTC标准时间的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript将当前时间转换成UTC标准时间,北京在东八区,在北京时间基础上减掉8小时 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to display the UTC date and time as a string. </p>

  • JavaScript实现将UPC转换成ISBN的方法

    本文实例讲述了JavaScript实现将UPC转换成ISBN的方法.分享给大家供大家参考.具体实现方法如下: if (indexisbn.indexOf("978") == 0) { isbn = isbn.substr(3,9); var xsum = 0; var add = 0; var i = 0; for (i = 0; i < 9; i++) { add = isbn.substr(i,1); xsum += (10 - i) * add; } xsum %= 11;

  • javascript实现的字符串转换成数组操作示例

    javascript实现的字符串转换成数组操作示例

    本文实例讲述了javascript实现的字符串转换成数组操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 字符串转换成数组</title> <script> var str="abcdefg" //1.将字符串

  • php实现将HTML页面转换成word并且保存的方法

    本文实例讲述了php实现将HTML页面转换成word并且保存的方法.分享给大家供大家参考,具体如下: 这里用使用到一个PHP的工具叫:PHPWord. 生成Word的原理是,将堆规定好了的xml压缩成一个zip包,并且把后缀名改成doc或者docx即可. 所以使用PHPWord,需要你的PHP环境安装zip.dll压缩扩展,我写了一个demo. 功能说明: 20150507 - HTML中的<p>标签和<ol>列表标签的获取 20150508 - 新增获取文章中的图片功能 2015

  • C#实现集合转换成json格式数据的方法

    本文实例讲述了C#实现集合转换成json格式数据的方法.分享给大家供大家参考,具体如下: /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string ToJson(DataTable dt) { if (dt != null

随机推荐