[分享·JavaScript]提取Table中的内容到XML对象
在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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对象的更多相关文章
- 将XML文件中的内容转换为Json对象
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...
- Javascript 判断 iframe 中的变量是否为对象
Javascript 判断 iframe 中的变量是否为对象 前言 公司之前的项目中,为了实现模块化,在 web 后端使用了 iframe 来组织框架和页面.由于当时没有很好地规划,iframe 子页 ...
- JavaScript获取table中某一列的值的方法
1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 使用Java或 JavaScript获取 方括号中的内容
1.使用Java获取方括号中的内容 String str = "[你]们,[我]们,[他]们,都要[好好学习,天天敲代码]"; Pattern p = Pattern.compil ...
- 当Table中td内容为空时，显示边框的办法
1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个 说明: ...
- Python之通配符--提取文件中的内容并输出
前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...
- python利用正则表达式提取文本中特定内容
正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python ...
- 通过SQL语句提取存储过程中的内容
首先,列出服务器上所有数据库. -- 获取数据库列表 SELECT name FROM master.dbo.sysdatabases ORDER BY name 其次,这是一种让所有的用户从数据库中 ...
- JavaScript修改表中的内容
例子: <?php ?> <html> <head> <meta http-equiv="Content-Type" content=&q ...
随机推荐
- innertext与innerhtml
<div id="test"> <span style="color:red">test1</span> test2 < ...
- angularjs webstorm 单元测试 Package.json
Package.json小结 生成package.json 定位到想放置package.json的目录,运行npm init,根据提示就可以生成package.json文件,其中test comman ...
- PYTHON对文件及文件夹的一些操作
python中对文件.文件夹的操作需要涉及到os模块和shutil模块. 创建文件:1) os.mknod("test.txt") 创建空文件2) open("test. ...
- java连接mongodb的一个奇葩问题及奇葩解决方式
昨天在eclipse中编写代码,本来连接mongodb进行各项操作都是正常的,但是有一会儿突然之间就没法连接了,还一直抱错,错误如下: 信息: Cluster created with setting ...
- 通过共享用户ID来实现多个应用程序使用同一个进程（一些情况的测试）
从很多方面来看,每个Android 应用程序都存在于它自己的世界之中:• 默认情况下,每个应用程序均运行于它自己的Linux 进程中.当应用程序中的任意代码开始执行时,Android 启动一个进程,而 ...
- kafka_2.11-0.8.2.2的搭建
一.下载官网的压缩包~ 修改conf/server.properties host.name=10.10.224.12 (修改为主机ip,不然服务器返回给客户端的是主机的hostname,客户端并不 ...
- hdu 5698 瞬间移动（排列组合）
这题刚看完,想了想,没思路,就题解了 = = 但不得不说,找到这个题解真的很强大,链接:http://blog.csdn.net/qwb492859377/article/details/514781 ...
- NeHe OpenGL教程 第二课：多边形
前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢 ...
- bug_ _java.lang.RuntimeException: Unable to start activity ComponentInfo{包名/类名}
写这篇博文,我顶着很大的压力,贴出来会引来网友的一片鄙视,不贴我又觉得对不起Android SDK研发团队. 本着对全世界Android无产者负责的态度,今天不得不指出Android编译时隐藏的很 ...
- Java设计模式—生产者消费者模式（阻塞队列实现）
生产者消费者模式是并发.多线程编程中经典的设计模式,生产者和消费者通过分离的执行工作解耦,简化了开发模式,生产者和消费者可以以不同的速度生产和消费数据.这篇文章我们来看看什么是生产者消费者模式,这个问 ...