用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 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
JQuery 常用操作代码
Mar 14 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP合并两个或多个数组的方法
2019/01/20 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python打印输出数组中全部元素
2018/03/13 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
详解【python】str与json类型转换
2019/04/29 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
主要领导对照检查材料
2014/08/26 职场文书
2014年班组工作总结
2014/11/20 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
民事诉讼代理词
2015/05/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书