[分享·JavaScript]提取Table中的内容到XML对象

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_33788244

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量73

点赞数

文章标签： javascript xhtml 前端 ViewUI

原文链接：http://www.cnblogs.com/sunsoftresearch/p/3533627.html

版权

　　在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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="获取表格数据" οnclick="return onBtnTryTable();" /></p>
</body>
</html>

转载于:https://www.cnblogs.com/sunsoftresearch/p/3533627.html

weixin_33788244

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[分享·JavaScript]提取Table中的内容到XML对象

　　在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的Table都重新写原生的JS代码效率太低，且不方便aspx对XML进行处理。　　所以，在今天抽时间写了这么一个JS类，见笑了。下面的JS请保存为“TableProcess.js”//***************获取Table中的数据，并提供Xml内容的支持类***********//获取指定...
复制链接

扫一扫