`
fireinjava
  • 浏览: 481291 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    博客分类:
  • js
阅读更多

计算每个单元格所在的实际行、列,而不是cellIndex

 

IE8、FireFox下测试可用

 

具体代码如下:

 

/**
 浏览器判断
 */
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
	Sys.ie = ua.match(/msie ([\d.]+)/)[1];
else if (document.getBoxObjectFor)
	Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
	
function containsArray(array, obj) {
	for (var i = 0; i < array.length; i++) {
		if (array[i] == obj) {
			return i;
			break;
		}
	}
	return -1;
}

Array.prototype.contains = function(obj) {
	return containsArray(this, obj);
}

function PrintTableToExcel(tableId) {

	var offsetLeftArray = new Array();
	var cell;// 单元格Dom
	var col;// 单元格实际所在列
	var cellStr;// 每个cell以row,col,rowSpan,colSpan,value形式
	var cellStrArray = [];
	var objTab = document.getElementById(tableId);

	// 遍历第一次取出offsetLeft集合
	for (var i = 0; i < objTab.rows.length; i++) {
		for (var j = 0; j < objTab.rows[i].cells.length; j++) {
			cell = objTab.rows[i].cells[j];
			if (offsetLeftArray.contains(cell.offsetLeft) == -1)
				offsetLeftArray.push(cell.offsetLeft);
		}
	}

	offsetLeftArray.sort(function(x, y) { return parseInt(x) - parseInt(y); });
	alert("offsetLeft集合:" + offsetLeftArray.join(','));

	// 遍历第二次生成cellStrArray
	for (var i = 0; i < objTab.rows.length; i++) {
		for (var j = 0; j < objTab.rows[i].cells.length; j++) {
			cell = objTab.rows[i].cells[j];
			col = offsetLeftArray.contains(cell.offsetLeft);
			cellStr = i + ',' + col + ',' + cell.rowSpan + ',' + cell.colSpan + "," + (Sys.firefox?cell.textContent:cell.innerText);
			cellStrArray.push(cellStr);
		}
	}

	// 显示
	var str = "行,列,rowSpan,colSpan,值\n";
	str += cellStrArray.join('\n');
	alert(str);

}

 



 

附件为例子.

 

  • 大小: 61.6 KB
分享到:
评论

相关推荐

    javascript 动态table添加colspan\rowspan 参数的方法

    当要调整表格的行列跨度时,可以使用`colspan`属性和`rowspan`属性。`colspan`用于指定一个单元格应横跨的列数,`rowspan`则用于指定一个单元格应纵跨的行数。 然而,传统的方式通过`setAttribute`方法设置`colspan...

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    JS实现动态修改table及合并单元格的方法示例

    `rowSpan`定义了一个单元格跨过的行数,而`colSpan`定义了跨过的列数。在示例中,虽然没有直接使用`rowSpan`和`colSpan`,但可以看到注释中有尝试设置这两个属性的代码。例如,`tabObj.rows[0].cells[2].rowSpan=2`...

    vue-easytable合并单元格

    例如,如果某一列需要在特定行合并多个单元格,可以在`render`函数内使用`&lt;tr&gt;`和`&lt;td&gt;`元素,并根据需要设置`rowspan`和`colspan`。 此外,Vue Easytable还支持`mergeCells`配置,这允许开发者在数据层面上定义...

    jquery.table.rowspan.js 表格自动合并单元格插件

    `jQuery.table.rowspan.js`是一个专为解决表格中单元格自动合并问题的jQuery插件。这个插件允许开发者在前端轻松处理复杂的表格布局,提高用户体验,同时也减轻了服务器端的计算压力。 ### 插件原理 `rowspan`属性...

    layui table合并单元格.zip

    layui提供了`colspan`和`rowspan`属性来设置单元格的跨越列数和行数,我们可以通过设置这两个属性来实现合并。 另外,"2layui数据表格跨行自动合并 - 合并行.url" 和 "3layui 动态表格之合并单元格 - 合并列.url" ...

    table数据相同合并单元格

    table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】

    jquery table rowspan 表格单元格合并Demo.zip

    在这个“jquery table rowspan 表格单元格合并Demo.zip”中,我们主要关注的是如何使用 jQuery 来实现 HTML 表格(`&lt;table&gt;`)中的 `rowspan` 属性来合并单元格,以创建更复杂、更有结构感的表格布局。 首先,`...

    JSP Table 单元格合并

    ### JSP Table 单元格合并 在网页开发中,表格是展示数据的重要方式之一。为了使表格看起来更简洁明了,在某些情况下我们需要对相同的单元格进行合并处理。本篇文章将详细探讨如何在 JSP(JavaServer Pages)环境中...

    colspan和rowspan

    在这个例子中,第一行的第二个单元格通过 `colspan="2"` 跨越了两列,而第二行的第二个单元格通过 `rowspan="2"` 跨越了两行。这样就形成了一个不规则的表格布局,满足了不同场景下的需求。 在实际开发中,`colspan...

    table合并单元格的多种方法

    `colspan`用来指定单元格跨越的列数,而`rowspan`则用于指定跨越的行数。例如,一个`td`元素设置`colspan="2"`将合并两列,`rowspan="3"`则合并三行。 ```html &lt;table&gt; &lt;td colspan="2"&gt;合并两列 &lt;td ...

    javascript万能table合并单元格,隐藏列 html版

    ### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时,我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如,在报表展示或者数据汇总...

    JS 实现Table相同行的单元格自动合并示例代码

    表格中的每个单元格可以跨越多个行或列,分别通过`rowSpan`和`colSpan`属性来设置。 在上述示例代码中,我们看到了一个自定义的JavaScript函数`autoRowSpan(tb, row, col)`,它接受三个参数:表格对象`tb`、起始行`...

    bootstrap-table导出合并单元格

    Bootstrap Table是一款基于...通过以上步骤,我们就能在使用Bootstrap Table时实现导出合并单元格的功能,提高数据展示的效率和质量。在实际开发中,可以根据项目需求调整和定制这些方法,以满足更复杂的需求。

    通过jquery还原含有rowspan、colspan的table的实现方法

    rowspan属性用于定义表格中的单元格(td或th)能够横跨多少行,而colspan属性则用于定义单元格能够横跨多少列。这样的设计允许表格在视觉上展示更为复杂和多样的数据排列,但在使用JavaScript或jQuery进行操作时,就...

    js 合并单元格2例

    总结,js合并单元格主要通过设置`colspan`和`rowspan`属性实现,而实际操作中,我们还需要结合JavaScript的DOM操作能力来满足动态需求。理解这些基础知识和技巧,能帮助我们在开发中更高效地处理表格数据和布局。

    JSP页面中利用C标签动态合并单元格

    在JSP页面中,我们可以用`&lt;c:forEach&gt;`遍历数据集,然后用`&lt;c:if&gt;`检查当前列是否与前一列相同。如果相同,那么就设置一个合并标志,同时在HTML中添加相应的`colspan`属性,告诉浏览器需要合并多少个列。 ```jsp ...

    js合并单元格 相同内容的单元格合并

    本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素定义,其中包含`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)元素。如果要合并单元格,我们通常...

Global site tag (gtag.js) - Google Analytics