用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根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
浅析Ajax语法
Dec 05 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
keras 多gpu并行运行案例
2020/06/10 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
超市仓管员岗位职责
2014/04/07 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
出差报告格式模板
2014/11/06 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
小学生大队委竞选稿
2015/11/20 职场文书