用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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python实现多属性排序的方法
2018/12/05 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python 函数中的参数类型
2020/02/11 Python
基于Python的OCR实现示例
2020/04/03 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
构造方法和其他方法的区别
2016/04/26 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
致运动员的广播稿
2015/08/19 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
pandas进行数据输入和输出的方法详解
2022/03/23 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android