建站
咨询
售后
建站咨询
js/jquery 合并相同单元格
获取值的方式是对的
创新互联-专业网站定制、快速模板网站建设、高性价比隆林网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式隆林网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖隆林地区。费用合理售后完善，十余年实体公司更值得信赖。
用个固定的位置示例:
if (tb.rows[0].cells[0].innerHTML == tb.rows[1].cells[0].innerHTML) {
//伪代码
tb.rows[1].deleteCell(0)
tb.rows[0].cells[0].rowspan =2
}
[img]基于jquery的合并table相同单元格的插件(精简版)
效果如下
原表格:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
SuZhou
33333
44444
SuZhouCity
SuZhou
55555
66666
SuZhouCity
ShangHai
77777
88888
ShangHaiCity
ShangHai
uuuuu
hhhhh
ShangHaiCity
ShangHai
ggggg
ccccc
ShangHaiCity
GuangZhou
ttttt
eeeee
GuangZhouCity
GuangZhou
ppppp
qqqqq
GuangZhouCity
处理之后的样子:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
33333
44444
55555
66666
ShangHai
77777
88888
ShangHaiCity
uuuuu
hhhhh
ggggg
ccccc
GuangZhou
ttttt
eeeee
GuangZhouCity
ppppp
qqqqq
效果出来,
看上去比较简单,
下面先看下页面
复制代码
代码如下:
table
id="process"
cellpadding="2"
cellspacing="0"
border="1"
thead
tr
tdcol0/td
tdcol1/td
tdcol2/td
tdcol3/td
/tr
/thead
tbody
tr
tdSuZhou/td
td11111/td
td22222/td
tdSuZhouCity/td
/tr
tr
tdSuZhou/td
td33333/td
td44444/td
tdSuZhouCity/td
/tr
tr
tdSuZhou/td
td55555/td
td66666/td
tdSuZhouCity/td
/tr
tr
tdShangHai/td
td77777/td
td88888/td
tdShangHaiCity/td
/tr
tr
tdShangHai/td
tduuuuu/td
tdhhhhh/td
tdShangHaiCity/td
/tr
tr
tdShangHai/td
tdggggg/td
tdccccc/td
tdShangHaiCity/td
/tr
tr
tdGuangZhou/td
tdttttt/td
tdeeeee/td
tdGuangZhouCity/td
/tr
tr
tdGuangZhou/td
tdppppp/td
tdqqqqq/td
tdGuangZhouCity/td
/tr
/tbody
/table
核心代码:
复制代码
代码如下:
//
这里写成了一个jquery插件的形式
$('#process').mergeCell({
//
目前只有cols这么一个配置项,
用数组表示列的索引,从0开始
//
然后根据指定列来处理(合并)相同内容单元格
cols:
[0,
3]
});
下面看看这个小插件的完整代码:
复制代码
代码如下:
;(function($)
{
//
看过jquery源码就可以发现$.fn就是$.prototype,
只是为了兼容早期版本的插件
//
才保留了jQuery.prototype这个形式
$.fn.mergeCell
=
function(options)
{
return
this.each(function()
{
var
cols
=
options.cols;
for
(
var
i
=
cols.length
-
1;
cols[i]
!=
undefined;
i--)
{
//
fixbug
console调试
//
console.debug(cols[i]);
mergeCell($(this),
cols[i]);
}
dispose($(this));
});
};
//
如果对javascript的closure和scope概念比较清楚,
这是个插件内部使用的private方法
//
具体可以参考本人前一篇随笔里介绍的那本书
function
mergeCell($table,
colIndex)
{
$table.data('col-content',
'');
//
存放单元格内容
$table.data('col-rowspan',
1);
//
存放计算的rowspan值
默认为1
$table.data('col-td',
$());
//
存放发现的第一个与前一行比较结果不同td(jQuery封装过的),
默认一个"空"的jquery对象
$table.data('trNum',
$('tbody
tr',
$table).length);
//
要处理表格的总行数,
用于最后一行做特殊处理时进行判断之用
//
我们对每一行数据进行"扫面"处理
关键是定位col-td,
和其对应的rowspan
$('tbody
tr',
$table).each(function(index)
{
//
td:eq中的colIndex即列索引
var
$td
=
$('td:eq('
+
colIndex
+
')',
this);
//
取出单元格的当前内容
var
currentContent
=
$td.html();
//
第一次时走此分支
if
($table.data('col-content')
==
'')
{
$table.data('col-content',
currentContent);
$table.data('col-td',
$td);
}
else
{
//
上一行与当前行内容相同
if
($table.data('col-content')
==
currentContent)
{
//
上一行与当前行内容相同则col-rowspan累加,
保存新值
var
rowspan
=
$table.data('col-rowspan')
+
1;
$table.data('col-rowspan',
rowspan);
//
值得注意的是
如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
//
最后一行的情况比较特殊一点
//
比如最后2行
td中的内容是一样的,
那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if
(++index
==
$table.data('trNum'))
$table.data('col-td').attr('rowspan',
$table.data('col-rowspan'));
}
else
{
//
上一行与当前行内容不同
//
col-rowspan默认为1,
如果统计出的col-rowspan没有变化,
不处理
if
($table.data('col-rowspan')
!=
1)
{
$table.data('col-td').attr('rowspan',
$table.data('col-rowspan'));
}
//
保存第一次出现不同内容的td,
和其内容,
重置col-rowspan
$table.data('col-td',
$td);
$table.data('col-content',
$td.html());
$table.data('col-rowspan',
1);
}
}
});
}
//
同样是个private函数
清理内存之用
function
dispose($table)
{
$table.removeData();
}
})(jQuery);
主要的说明在注释里应该都有了,
代码的确比较简单,
像有些地方还值得改进
•处理的table内容是从tbody开始查找的,
如果没有tbody,
那应该给出个更通用化的方案
•for
(
var
i
=
cols.length
-
1;
cols[i]
!=
undefined;
i--)...如果表格数据量大,
处理的列也比较多,
这里不进行优化会有造成浏览器线程阻塞的风险,
可以考虑用setTimeout
•其他什么值得改进的,
我想应该会不少的
jQuery 合并单元格按id号合并而不是按单元格的内容合并，如何做？
看上面的代码，写法中有个规则：必须是相邻的才可以合并。
所以你提出的按ID合并也必须是ID相同且相邻。
把
if (that != null $(this).html() == $(that).html()) {
改成
if (that != null $(this).attr('id') == $(that).attr('id')) {
就可以了。
用jquery动态添加行，同时合并单元格，怎样实现
如下所示：
////在table的第二行的位置添加一行：
var tbl_elm = $("#dgList");
$('trtd colspan=\'2\'xxxxxx/td/tr').insertBefore($("TR", tbl_elm).eq(1))
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)
var tds = $("#dgList .TableHeader1").find('td');
tds[6].setAttribute("colSpan", "2");
还可以写成：tds[6].attr("rowSpan", 2);
这种格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove();
////juqery 读取table第N行第M列
$("#dgList").find("tr").eq(N).find("td").eq(M);
////合并一行中除个别单元格之外的所有单元格
$("#dgList tr:eq(0) td").each(function () {
if ($(this).text() != '租赁资源' $(this).text() != '用地规范') {
$(this).attr("rowspan", "2");
}
});
////指定行插入指定行后面
$('trtd租赁资源/tdtd用地规范/td/tr').insertAfter($("#dgList tr:eq(0)"));
jquery 动态合并单元格的实现方法
如下所示：
////在table的第二行的位置添加一行：
var
tbl_elm
=
$("#dgList");
$('trtd
colspan=\'2\'xxxxxx/td/tr').insertBefore($("TR",
tbl_elm).eq(1))
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)
var
tds
=
$("#dgList
.TableHeader1").find('td');
tds[6].setAttribute("colSpan",
"2");
还可以写成：tds[6].attr("rowSpan",
2);
这种格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove();
////juqery
读取table第N行第M列
$("#dgList").find("tr").eq(N).find("td").eq(M);
////合并一行中除个别单元格之外的所有单元格
$("#dgList
tr:eq(0)
td").each(function
()
{
if
($(this).text()
!=
'租赁资源'
$(this).text()
!=
'用地规范')
{
$(this).attr("rowspan",
"2");
}
});
////指定行插入指定行后面
$('trtd租赁资源/tdtd用地规范/td/tr').insertAfter($("#dgList
tr:eq(0)"));
以上这篇jquery
动态合并单元格的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
标题名称：jquery表格并格,jquery合并单元格
文章路径：http://lswzjz.com/article/dsoppee.html
