在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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. oracle11g导入dmp文件（根据用户）

    已知:用户名.密码.dmp文件 .(指即将导入dmp文件的用户名和密码) 需求:将该dmp文件导入本地oracle11g中. 步骤: 1.将该dmp文件拷贝到G:\oracle11g\admin\or ...

  2. Web前端相关

    1)emmet2)prettify3)angularjs4)coffeescript5)bower (nodejs)6)requirejs

  3. Python基础教程【读书笔记】 - 2016/7/14

    希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第六波:第2章  列表和元组 [总览]  数据结构,是通过某种方式组织在一起的数据元素的集合,数据元素可以使数字或字符串 ...

  4. Python 字典和列表的对比应用

    Q:将下列格式的txt文件,打印出该选手的3个最快跑步时间 james2.txt =>“James Lee,2002-3-14,2-34,3:21,2.34,2.45,3.01,2:01,2:0 ...

  5. PHP 打印调用函数入口地址(堆栈)

    今天网站出现一个BUG,然后直接在数据库类里面写日志,看是哪条SQL出了问题,SQL语句到是找到了,但是不知道这条SQL语句来自何处,于是就想啊,如果能有一个办法,查看当前正在运行的这个方法是被哪个方 ...

  6. Spring Tool Suite中的Tomcat启动状态修改java代码保存立刻生效

  7. IGS_学习笔记06_IREP发布客户化集成接口为Web Service（案例）

    2015-01-03 Created By BaoXinjian

  8. MVC ViewData和ViewBag[转]

    转自:http://blog.csdn.net/a497785609/article/details/7854402#t0       视图数据可以通过ViewBag属性访问,它主要是为了从Contr ...

  9. Android listview中使用checkbox

    最近比较忙碌,我也不知道忙的什么东西,打算写的博客写了一半,还没写完,今天先扯一扯项目中遇到的一个问题,一方面防止以后遇到这个问题忘记如何解决,另一方面希望可以提供给遇到同样问题的朋友一个思路.下面开 ...

  10. java之生产者与消费者

    package com.produce; import java.util.LinkedList; import java.util.Queue; /*@author shijin * 生产者与消费者 ...