在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的Table都重新写原生的JS代码效率太低，且不方便aspx对XML进行处理。

　　所以，在今天抽时间写了这么一个JS类，见笑了。

下面的JS请保存为“TableProcess.js”

//***************获取Table中的数据，并提供Xml内容的支持类***********

//获取指定id对应的Table对象

function TableXmlEngen(oTab) {

    var oTable;

    if (!oTab) {

    }

    else {

        oTable = oTab;

    }

    this.Init = function(oTab) {

        oTable = oTab;

    };

    //返回属性满足要求的所有行的数组对象

    this.getRows = function(oTable, sJuageAttr, sFitValue) {

        var nIndex = 0;

        var oRows = new Array();

        for (nIndex = 0; nIndex < oTable.rows.length; nIndex++) {

            if (oTable.rows[nIndex].getAttribute(sJuageAttr) == sFitValue) {

                //add to array

                oRows.push(oTable.rows[nIndex]);

            }

            else if (!sJuageAttr || !sFitValue) {

                //如果第二、三任何一个数据不存在，则表示不过滤

                oRows.push(oTable.rows[nIndex]);

            }

        }

        return oRows;

    };

    //返回一行的所有的列的属性值

    //依赖于：getUseAttributes

    this.getRowProperty = function(oRow) {

        var oPropertys = [];

        var nIndex = 0;

        for (nIndex = 0; nIndex < oRow.cells.length; nIndex++) {

            oPropertys.push(getUseAttributes(oRow.cells[nIndex]));

        }

        return oPropertys;

    };

    //返回的是键值对的集合,name:value;

    //函数返回所有的有意义的属性和属性值，默认的空白属性和属性值都不会返回

    this.getUseAttributes = function(oUnit) {

        var nIndex = 0;

        var oAttrs = [];

        var oTmpData = {};

        for (nIndex = 0; nIndex < oUnit.attributes.length; nIndex++) {

            var oAttribute = oUnit.attributes[nIndex];

            if (oAttribute.value != "null" && !oAttribute.value == false) {

                oTmpData = { name: oAttribute.name, value: oAttribute.value };

                oAttrs.push(oTmpData);

            }

        }

        return oAttrs;

    };

    this.getRowData = function(oRow) {

        var oRowData = [];

        var nIndex = 0;

        for (nIndex = 0; nIndex < oRow.cells.length; nIndex++) {

            if (!oRow.cells[nIndex].getAttribute("name")) {

                var oDic = { name: "name" + nIndex, value: oRow.cells[nIndex].innerHTML };

                oRowData.push(oDic);

            }

            else {

                var oDic = { name: oRow.cells[nIndex].getAttribute("name"), value: oRow.cells[nIndex].innerHTML };

                oRowData.push(oDic);

            }

        }

        oRowData.appendData = function(oXml, oTopNode) {

            var oNewNode = oXml.createElement("data");

            var nIndex = 0;

            oTopNode.appendChild(oNewNode);

            for (nIndex = 0; nIndex < oRowData.length; nIndex++) {

                var oNode = oXml.createElement("data-collum");

                var oNodeText = oXml.createTextNode(oRowData[nIndex].value);

                oNode.setAttribute("name", oRowData[nIndex].name);

                oNode.appendChild(oNodeText);

                oNewNode.appendChild(oNode);

            }

            return;

        };

        return oRowData;

    };

    this.getTableData = function(sRowType, sTypeValue) {

        var nIndex = 0;

        var oTableInfo = [];

        var oRows = getRows(oTable, sRowType, sTypeValue);

        for (nIndex = 0; nIndex < oRows.length; nIndex++) {

            oTableInfo.push(getRowData(oRows[nIndex]));

        }

        oTableInfo.createXmlObj = function() {

            var sXml = "";

            var nIndex = 0;

            var oXml = new ActiveXObject("Microsoft.XMLDOM");   //先创建好一个空的Xml对象

            var oTopNode = oXml.createElement("SunSoft_Data");  //创建一个顶级节点

            oXml.appendChild(oTopNode);                         //将这个顶级节点加到Xml对象上

            //oTopNode是顶级Node（节点）

            for (nIndex = 0; nIndex < oTableInfo.length; nIndex++) {

                oTableInfo[nIndex].appendData(oXml, oTopNode);  //为顶级节点增加子节点，每个子节点代表一行的数据，调用的是oRowData.appendData方法

            }

            return oXml;

        }

        return oTableInfo;

    };

}

　　下面是测试的页面源代码：

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

<head>

    <title>测试获取表格数据</title>

    <script type="text/javascript" src="TableProcess.js"></script>

    <script language="JavaScript" type="text/javascript">

        //传入table标签的id

        function onBtnTryTable() {

            var oTable = document.getElementById("TestTable");

            var oTableXmlObj = new TableXmlEngen(oTable);

            var oDataObj = oTableXmlObj.getTableData("row-type", "data");

            var oXmlObj = oDataObj.createXmlObj();

            alert(oXmlObj.xml);

        }

    </script>

    <style type="text/css">

        .style1

        {

            width: 100%;

        }

    </style>

</head>

<body>

    <table class="style1" id="TestTable">

        <tr row-type="data">

            <td name="username">

                张三

            </td>

            <td name="usercode">

                zhangs01

            </td>

        </tr>

        <tr row-type="data">

            <td name="username">

                李四

            </td>

            <td name="usercode">

                lis01

            </td>

        </tr>

        <tr row-type="data">

            <td name="username">

                王二麻子

            </td>

            <td name="usercode">

                wangemz</data-collum>

            </td>

            <td name="sex">

                boy

            </td>

        </tr>

    </table>

    <p>

        <input id="btnTryTable" type="button" value="获取表格数据" onclick="return onBtnTryTable();" /></p>

</body>

</html>

　　

[分享·JavaScript]提取Table中的内容到XML对象的更多相关文章

  1. 将XML文件中的内容转换为Json对象

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...

  2. Javascript 判断 iframe 中的变量是否为对象

    Javascript 判断 iframe 中的变量是否为对象 前言 公司之前的项目中,为了实现模块化,在 web 后端使用了 iframe 来组织框架和页面.由于当时没有很好地规划,iframe 子页 ...

  3. JavaScript获取table中某一列的值的方法

    1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. 使用Java或 JavaScript获取 方括号中的内容

    1.使用Java获取方括号中的内容 String str = "[你]们,[我]们,[他]们,都要[好好学习,天天敲代码]"; Pattern p = Pattern.compil ...

  5. 当Table中td内容为空时，显示边框的办法

    1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个    说明: ...

  6. Python之通配符--提取文件中的内容并输出

    前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...

  7. python利用正则表达式提取文本中特定内容

    正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python ...

  8. 通过SQL语句提取存储过程中的内容

    首先,列出服务器上所有数据库. -- 获取数据库列表 SELECT name FROM master.dbo.sysdatabases ORDER BY name 其次,这是一种让所有的用户从数据库中 ...

  9. JavaScript修改表中的内容

    例子: <?php ?> <html> <head> <meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Hive(五):hive与hbase整合

    配置 hive 与 hbase 整合的目的是利用 HQL 语法实现对 hbase 数据库的增删改查操作,基本原理就是利用两者本身对外的API接口互相进行通信,两者通信主要是依靠hive_hbase-h ...

  2. Newtonsoft.Json 序列化和反序列化 时间格式　［转］

    1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg:   A a=new A(); a.Name="Elain ...

  3. Android手机平板两不误，使用Fragment实现兼容手机和平板的程序

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744943 记得我之前参与开发过一个华为的项目,要求程序可以支持好几种终端设备,其 ...

  4. Redis主从同步介绍

    Redis主从同步命令和配置项 启动主从复制:master无需任何操作,slave中使用以下任意一种开启复制功能 (1).通过配置文件启动主从复制: 在redis.conf中加入"slave ...

  5. Django的列表反序

    Django虽然是python的web框架,但它不是所有的python特性都支持的. 最近在项目中遇到一个问题,需要在Django中将获得的列表反序排列,一开始我使用的是python的reverse方 ...

  6. Python 函数的创建和调用

    >>> movies =[ "the holy grail", 1975,"terry jones",91, ["graham ch ...

  7. Hierarchy Viewer

    http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为h ...

  8. 一个SQLSERVER触发器的示例

    CREATE TRIGGER WoStateChange on T_PD_WorkOrder AFTER UPDATE AS BEGIN declare @WorkOrderID varchar(20 ...

  9. 6. redis持久化，认证

    一. RDB 快照持久化 (默认) rdb机制,在满足redis.conf中配置的持久化策略后, 自动持久化数据, 默认存储在dump.rdb文件中 策略 : save 900 1 : 900秒内,一 ...

  10. Tomcat远程调试catalina.sh的配置

    #!/bin/sh # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license ...