用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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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代码
2008/04/09 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
jQuery无冲突模式详解
2019/01/17 jQuery
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
下载给定网页上图片的方法
2014/02/18 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
专业实习自我鉴定
2013/10/29 职场文书
商品陈列协议书
2014/09/29 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
工程部岗位职责
2015/02/10 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技