用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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
JS分页效果示例
Oct 11 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 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
详解php中 === 的使用
2016/10/24 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Django ModelForm操作及验证方式
2020/03/30 Python
PyQt实现计数器的方法示例
2021/01/18 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
分家协议书
2014/04/21 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
初中家长评语和期望
2014/12/26 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
教师网络培训心得体会
2016/01/09 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
vue封装数字翻牌器
2022/04/20 Vue.js