在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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. RSA加密工具包

    主要参考: http://www.blogjava.net/icewee/archive/2012/05/19/378570.html http://snowolf.iteye.com/ 基于以上代码 ...

  2. JABX简单介绍

    主要引至http://suo.iteye.com/blog/1233458 一.简介 1.概念是什么:(Java Architecture for XML Binding) 是一个业界的标准,是一项可 ...

  3. 06socket编程

    socket可以看成是用户进程与内核网络协议栈的编程接口. socket不仅可以用于本机的进程间通信,还可以用于网络上不同主机的进程间通信. IPv4套接口地址结构通常也称为“网际套接字地址结构”,它 ...

  4. 【转】SQL SERVER 存储过程中变量的作用域

    今天遇到一个很有趣的事情,以前没有注意过,所以记下来. 先来看例子. SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE ...

  5. (WPF) MVVM: 动态添加控件及绑定。

    比如需要显示一个键盘,里面有各个按键.实现的效果如下: 之前的思路,就是建立一个singleKey的控件,然后在后台用代码动态的添加到父控件里去, 再用代码在后台进行绑定. 这种实现方法并不是真正的M ...

  6. sublime代码片段功能

    tools - > developer - > new snippet有了这个,你就可以通过iu这两个键,直接弄出自己的模板了,这就很方便了,不用在复制粘贴了.上是代码模板,下面是快捷键, ...

  7. SG函数模板

    这篇虽然是转载的,但代码和原文还是有出入,我认为我的代码更好些. 转载自:http://www.cnblogs.com/frog112111/p/3199780.html 最新sg模板: //MAXN ...

  8. int long long范围

    unsigned   int   0-4294967295   int   2147483648-2147483647 unsigned long 0-4294967295long   2147483 ...

  9. codeforces 553A . Kyoya and Colored Balls 组合数学

    Kyoya Ootori has a bag with n colored balls that are colored with k different colors. The colors are ...

  10. 资源文件assets和 res下面raw文件的使用不同点

    在建立项目中一般会默认建立assets文件,当然我们还可以在res文件下面建立raw文件夹,这里面都可以存放一些图片,音频或者文本信息,可以供我们在程序当中进行使用,不过他们两个也有不同点: asse ...