在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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. Asp.Net MVC 路由 - Asp.Net 编程 - 张子阳

    http://cache.baiducontent.com/c?m=9d78d513d98316fa03acd2294d01d6165909c7256b96c4523f8a9c12d522195646 ...

  2. js之浏览器对象模型（BOM）

    一.BOM的层次结构: window(可以访问BOM中的所有元素,是最顶层的元素)下一层包括如下: →document (document的属性:forms.cookie.links/anchors. ...

  3. Zabbix agent on Microsoft Windows

    1.在Windows上创建目录: C:\Windows\zabbix\ 2.下载安装包并解压到新建的目录 3.下载地址:http://www.zabbix.com/downloads/3.0.0/za ...

  4. SVN代码回滚命令之---merge的使用

    一.改动还没被提交的情况(未commit) 这种情况下,见有的人的做法是删除work copy中文件,然后重新update,恩,这种做法达到了目的,但不优雅,因为这种事没必要麻烦服务端. 其实一个命令 ...

  5. java.lang.StackOverflowError: stack size 8MB

    java.lang.StackOverflowError: stack size 8MB at android.text.TextUtils.getChars(TextUtils.java:86) a ...

  6. [CSS]如何正确使用ID和Class？

    作者:DarkZone链接:https://www.zhihu.com/question/19550864/answer/23440690来源:知乎 以下摘自<精通CSS:高级Web标准解决方案 ...

  7. PLSQL_批量压缩表Table Compress（案例）

    2015-04-01 Created By BaoXinjian

  8. PLSQL_性能优化工具系列17_Best Practices: Proactive Data Collection for Performance Issues

    占位符 https://support.oracle.com/epmos/faces/DocumentDisplay?_afrLoop=2082062510193540&id=1366133. ...

  9. Linux命令（15）查看系统版本信息

    一,查看Linux内核版本命令(两种方法) 1.cat /proc/version [user@fgejjw7Z home]$ cat /proc/version Linux version -.el ...

  10. WindowsForm通过字符串名称实例化控件

    private Control FindControl(Control control, string controlName) { Control c1; foreach (Control c in ...