用js+xml自动生成表格的东西


Posted in Javascript onDecember 21, 2006
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
<script language="javascript"> 
function loadXML(handler) { 
    var url = "employees.xml"; 
    if(document.implementation&&document.implementation.createDocument) { 
        var xmldoc = document.implementation.createDocument("", "", null); 
        xmldoc.onload =  handler(xmldoc, url); 
        xmldoc.load(url); 
    } 
    else if(window.ActiveXObject) { 
        var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 
        xmldoc.onreadystatechange = function() { 
            if(xmldoc.readyState == 4) handler(xmldoc, url); 
        } 
        xmldoc.load(url); 
    } 
} 
function makeTable(xmldoc, url) { 
    var table = document.createElement("table"); 
    table.setAttribute("border","1"); 
    table.setAttribute("width","600"); 
    table.setAttribute("class","tab-content"); 
    document.body.appendChild(table); 
    var caption = "Employee Data from " + url; 
    table.createCaption().appendChild(document.createTextNode(caption)); 
    var header = table.createTHead(); 
    var headerrow = header.insertRow(0); 
    headerrow.insertCell(0).appendChild(document.createTextNode("姓名")); 
    headerrow.insertCell(1).appendChild(document.createTextNode("职业")); 
    headerrow.insertCell(2).appendChild(document.createTextNode("工资")); 
    var employees = xmldoc.getElementsByTagName("employee"); 
    for(var i=0;i<employees.length;i++) { 
        var e = employees[i]; 
        var name = e.getAttribute("name"); 
        var job = e.getElementsByTagName("job")[0].firstChild.data; 
        var salary = e.getElementsByTagName("salary")[0].firstChild.data; 
        var row = table.insertRow(i+1); 
        row.insertCell(0).appendChild(document.createTextNode(name)); 
        row.insertCell(1).appendChild(document.createTextNode(job)); 
        row.insertCell(2).appendChild(document.createTextNode(salary)); 
    } 
} 
</script> 
<link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> <body onLoad="loadXML(makeTable)"> 
</body> 
</html>

<?xml version="1.0" encoding="gb2312"?> 
<employees> 
    <employee name="J.Doe"> 
        <job>Programmer</job> 
        <salary>32768</salary> 
    </employee> 
    <employee name="A.Baker"> 
        <job>Sales</job> 
        <salary>70000</salary> 
    </employee> 
    <employee name="Big Cheese"> 
        <job>CEO</job> 
        <salary>100000</salary> 
    </employee> 
</employees>
Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
FCK调用方法..
Dec 21 #Javascript
firefox中JS读取XML文件
Dec 21 #Javascript
URI、URL和URN之间的区别与联系
Dec 20 #Javascript
Javascript SHA-1:Secure Hash Algorithm
Dec 20 #Javascript
Code:findPosX 和 findPosY
Dec 20 #Javascript
Javascript MD4
Dec 20 #Javascript
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 #Javascript
You might like
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python性能优化的20条建议
2014/10/25 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python实现数据图表
2017/07/29 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
销售顾问岗位职责
2014/02/25 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
初三班主任寄语大全
2014/04/04 职场文书
有关爱国演讲稿
2014/05/07 职场文书
获奖感言范文
2015/07/31 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书