用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 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
浅析JS运动
Dec 28 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP引用返回用法示例
2016/05/28 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
vuex存储token示例
2019/11/11 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python代码制作configure文件示例
2014/07/28 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python装饰器简单用法实例小结
2018/12/03 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python 实现两个线程交替执行
2020/05/02 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
年度考核评语
2014/01/19 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
公司门卫岗位职责
2015/04/13 职场文书
身份证丢失证明
2015/06/19 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
美元符号 $
2022/02/17 杂记