用js+xml自动生成表格的东西

代码如下:

<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>

赞 (0)

相关推荐

  • 基于JavaScript代码实现自动生成表格

    废话不多说,直接给大家贴js代码了,具体代码如下所示: //js实现输入表格行数.列数自动生成表格源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 用js实现的一个根据内容自动生成表格的函数

    晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序. 要求是: 1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在). 2,当输出数据条数不等于表格的"长X宽"时,用"<td> </td>"自动填补最后一行空余的地方. 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(M

  • JavaScript实现自动变换表格边框颜色

    代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码</title> </head> <body> <table border="0" width="261" id="change_jb51_net" style="border

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • HTML 自动伸缩的表格Table js实现

    下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高.用户体验很好.[优点] 1.对开发人员指定的表格没有任何影响: 2.使用简单: 3.被定义的表格样式可以随意的定制你的样式,不对你的样式构成影响: 4.移植性好,扩展性好. [缺点] 目前用IE7测试正常,但不支持FireFox,工作比较忙,没时间更正,希望网友更正,俺在此谢过.^_^ [使用方法] 1.将AutoTableSize

  • 用js+xml自动生成表格的东西

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> function loadXML(handler) {     var url = &

  • js简单实现自动生成表格功能示例

    js简单实现自动生成表格功能示例

    本文实例讲述了js简单实现自动生成表格功能.分享给大家供大家参考,具体如下: JS实现自动生成表格 由于自己的算法8太行,所以只能尽量用简单点的方法实现效果 下面直接上代码 <table id="table"> <thead> <td>姓名</td> <td>年龄</td> <td>身高</td> </thead> <tbody></tbody> <

  • 利用node.js实现自动生成前端项目组件的方法详解

    利用node.js实现自动生成前端项目组件的方法详解

    本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),login.html,login.less这四个文件.因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • iOS自动生成表格效果的实现代码

    iOS自动生成表格效果的实现代码

    一.效果图 二.工程图 三.代码. RootViewController.h #import <UIKit/UIKit.h> #import "LabelOnBackImage.h" @interface RootViewController : UIViewController { LabelOnBackImage *labelFirst; } @end RootViewController.m #import "RootViewController.h&quo

  • 利用原生JS自动生成文章标题树的实例

    实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello

  • JavaScript实现网页动态生成表格

    JavaScript实现网页动态生成表格

    JavaScript(JS)网页–动态生成表格,供大家参考,具体内容如下 在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库).在HTML中创建thead,然后通过JavaScipt动态生成tbody.并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&

  • JS封装的自动创建表格的实现代码

    为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈.. 关键代码如下: <script type="text/javascript"> var currentActiveRow; //选中的颜色 var customTable = function() { }; customTable.prototype = { init: { ajaxUrl: "", tId: "tbody

随机推荐