用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 相关文章推荐
JS Timing
Apr 21 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
微信小程序云开发之使用云存储
May 17 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
js获取单选按钮的数据
2006/11/27 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python实现飞机大战
2018/09/11 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
婚礼主持结束词
2014/03/13 职场文书
党员岗位承诺书
2014/03/25 职场文书
电子商务求职信
2014/06/15 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL