在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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. 导入和导出表空间：复制文件比mysqldump&restore快

    #生成测试数据server1:mysql> CREATE TABLE test (c1 INT PRIMARY KEY)engine = innodb;Query OK, 0 rows affe ...

  2. 配置Windows Server2008+iis+php+mysql所需下载安装包

    最近一个朋友让我帮忙给配置服务器iis+php+mysq 环境,遇到了很多问题,特此就在这里说一下.小弟只是在windwos2003 和windwos XP下配置过iis+php+mysql,去朋友那 ...

  3. oracle分析函数 之分组累加求和

    select s.slice_date_to ,s.made_id ,sum(s.steup_count)over(partition by s.made_id order by s.slice_da ...

  4. java hashtable

    java hashtable Hashtables提供了一个很有用的方法可以使应用程序的性能达到最佳. Hashtables(哈希表)在计算机领域中已不 是一个新概念了.它们是用来加快计算机的处理速度 ...

  5. C/C++中产生随机数(rand,srand用法)

    计算机的随机数都是由伪随机数,即是由小M多项式序列生成的,其中产生每个小序列都有一个初始值,即随机种子.(注意: 小M多项式序列的周期是65535,即每次利用一个随机种子生成的随机数的周期是65535 ...

  6. 获取网页URL地址及参数等的两种方法(js和C#)

    转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...

  7. (转)Edge实现NodeJS与.NET互操作(包括UI界面示例)

    本文转载自:http://blog.csdn.net/kimmking/article/details/42708049 1.  Edge是什么 Edge是一种在进程内实现NodeJS与.NET互操作 ...

  8. ApiCloud重新定义移动应用开发

    http://www.apicloud.com/ 为APP开发者提供云端的API服务和数据存储服务,动态生成RESTful API,支持在线NoSQL数据表设计.API调试及用量分析:同时提供推送.云 ...

  9. 【springmvc】之常用的注解

    原理这里不叙述,只讲怎么用 1. spring mvc中的@PathVariable是用来获得请求url中的动态参数的 @RequestMapping(value="/user/{userI ...

  10. Spring整合activiti-modeler5.16遇到的小问题

    接上一篇整合activiti-modeler并成功创建model:Spring整合activiti-modeler5.16   之后,我尝试运用自定义的model部署流程,但是在部署的过程中又遇到了一 ...