用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格式化货币数据实现代码
Sep 04 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
js canvas实现橡皮擦效果
Dec 20 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
定义php常量的详解
2013/06/09 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
python求pi的方法
2014/10/08 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python实现上传下载文件功能
2020/11/19 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
英文求职信结束语大全
2013/10/26 职场文书
师范生见习报告范文
2014/11/03 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB