用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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
学习ExtJS border布局
Oct 08 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue实现图片预览组件封装与使用
Jul 13 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
处理Python中的URLError异常的方法
2015/04/30 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
一套SQL笔试题
2016/08/14 面试题
考试违纪检讨书
2014/02/02 职场文书
六五普法宣传标语
2014/10/06 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL