JavaScript实现表格列合并与动态生成
本文档主要介绍了如何使用JavaScript动态合并HTML表格(table)中的相同内容单元格,通过结合jQuery库实现这一功能。以下将详细介绍整个过程。 首先,确保已正确引入jQuery库,因为合并单元格的操作需要依赖其强大的DOM操作能力。在代码开始部分,有一个函数`table_rowspan`,它接受三个参数:`table_id`用于指定要操作的表格ID,`table_colnum`是用于合并的列号规则,以及可选的行范围限制。 函数内部首先判断`table_colnum`的类型,将其转换为整数,以便后续处理。如果`table_colnum`是一个简单的数字,直接存储;如果是"even"或"odd",则根据奇偶性设置合并规则,如每2个连续单元格合并。如果`table_colnum`包含'n'作为分隔符,表示批量合并,程序会计算出一个范围内的列号。 接下来,获取表格的所有行数和列数,然后遍历`cols`数组,将对应的单元格范围添加到`table_firsttd`和`table_currenttd`变量中,用于记录当前合并的起始和结束单元格。同时,初始化`table_SpanNum`变量,用于累计合并的单元格数量。 在循环中,`vartable_minrow`和`vartable_maxrow`用于指定合并操作的行范围,如果不提供则默认为整个表格。对于每个列范围,函数会查找对应行的单元格,并检查它们是否已经合并过。如果没有,就增加`table_SpanNum`并更新`table_currenttd`,最后将当前合并的单元格设置为下一个。 通过这个函数,用户可以根据不同的参数自定义合并规则,实现动态调整表格的结构,从而达到合并相同内容单元格的目的。这对于数据展示、简化表格显示模式或者提高表格可读性等方面非常实用。需要注意的是,这个方法假设输入的参数有效,实际应用时可能需要进行错误处理和边界检查。
==================自行引入jquery等文件===================================================
==========================合并单元格内容====================================================
function table_rowspan(table_id, table_colnum) {
if (table_colnum == "even") {
table_colnum = "2n";
}
else if (table_colnum == "odd") {
table_colnum = "2n+1";
}
else {
table_colnum = "" + table_colnum;
}
var cols = [];
var all_row_num = $(table_id + " tr td:nth-child(1)").length;
var all_col_num = $(table_id + " tr:nth-child(1)").children().length;
if (table_colnum.indexOf("n") == -1) {
cols[0] = table_colnum;
}
else {
var n = 0;
var a = table_colnum.substring(0, table_colnum.indexOf("n"));
var b = table_colnum.substring(table_colnum.indexOf("n") + 1);
//alert("a="+a+"b="+(b==true));
a = a ? parseInt(a) : 1;
b = b ? parseInt(b) : 0;
//alert(b);
cols[n] = a * n + b;
n++;
}
}
var table_minrow = arguments[2] ? arguments[2] : 0;
var table_maxrow = arguments[3] ? arguments[3] : all_row_num + 1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for (var j = 0; j < cols.length; j++) {
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
var table_col_obj = $(this);
if (table_col_obj.html() != " ") {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
}
else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_firsttd.attr("rowSpan", table_SpanNum);
table_currenttd.attr("rowSpan", table_SpanNum);
table_currenttd.hide(); //remove();
table_currenttd.addClass("hide");
} else {
table_firsttd = $(this);
table_SpanNum = 1;
剩余9页未读,继续阅读
- 粉丝: 2
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程:开发流媒体应用的实践指南
- PID调节深入解析:从入门到精通
- 数字水印技术:保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程:硬盘检测与坏道屏蔽
- 操作系统期末复习指南:进程、线程与系统调用详解
- Cognos8性能优化指南:软件参数与报表设计调优
- Cognos8开发入门:从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门:XML基础教程与实例解析
- Matlab振动分析详解:从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全