[分享·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 ...
随机推荐
- R(二): http与R脚本通讯环境安装
结合实际的工作环境,在开始R研究的时候,首先着手收集的就是能以Web方式发布R运行结果的基础框架,无耐的是,R一直以来常使用于个人电脑的客户端程序上,大家习惯性的下载R安装包,在自己的电脑上安装 -- ...
- android 为应用程序创建桌面快捷方式技巧分享
手机装的软件过多,找起来很不方便,所以在主页面有一个快捷方式的话会很不错的,本文将介绍如何实现,需要了解跟多的朋友可以参考下 我们开发一款软件后,如果手机装的软件过多,去翻的话会很难翻的,所以 ...
- 理解Javascript参数中的arguments对象
ECMAScript中函数没有标签名的特性,所以ECMAScript函数中没有重载. Javascript中arguments的存在可以弥补javascript中函数没有重载的不足. Javascri ...
- 剑指offer系列61---数组中的逆序对
[题目]在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. * [思路]运用归并排序的思想. * 首先将数组分成两个子数组,统 ...
- 打开PDF文件弹出阅读未加标签文档的解决方法
在“高级”菜单的“辅助工具”选中“设置助手”,然后点选“设置屏幕阅读器选项”,下一步之后,将“忽略已加标签文档的阅读顺序”和“添加标签到文档之前进行确认”(有的版本显示的是“为文档加标签前确认”)前面 ...
- UIActivityIndicatorView添加到UIButton上并响应事件
spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewSty ...
- php获取从百度搜索进入网站的关键词
<?php function search_word_from() { $referer = isset($_SERVER['HTTP_REFERER'])?$_SERVER['HTTP_REF ...
- 黄聪：wordpress如何添加自定义文章快速编辑按钮
When working with WordPress posts and you want to quickly change the status or date of one or more p ...
- 黄聪：VS2010开发T4模版引擎之基础入门
原文:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又 ...
- 理解Socket编程【转载】
“一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...