封装Jquery 合并table中任何同列数据

封装代码:

jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件
        return this.each(function () {
            var that;
            $(‘tr‘, this).each(function (row) {
                $(‘td:eq(‘ + colIdx + ‘)‘, this).filter(‘:visible‘).each(function (col) {
                    if (that != null && $(this).html() == $(that).html()) {
                        rowspan = $(that).attr("rowSpan");
                        if (rowspan == undefined) {
                            $(that).attr("rowSpan", 1);
                            rowspan = $(that).attr("rowSpan");
                        }
                        rowspan = Number(rowspan) + 1;
                        $(that).attr("rowSpan", rowspan);
                        $(this).hide();
                    } else {
                        that = this;
                    }
                });
            });
        });
    }

  调用方式:

$("#ceshi").rowspan(0); //.rowspan(0)从0即第一列开始

  2纯js写法:

function hb(){
var tab = document.getElementById("subtable");
var maxCol = 3, val, count, start;
var ys="";
for(var col = maxCol-1; col >= 0 ; col--) {
count = 1;
val = "";
for(var i=0; i<tab.rows.length; i++){
if(val == tab.rows[i].cells[col].innerHTML){
count++;
}else{
if(count > 1){
//合并
start = i - count;
if(ys=="#00FFFF"){
ys="#EEEE00";
}else{
ys="#00FFFF";
}
tab.rows[start].cells[col].rowSpan = count;
tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色
// ys="#EEEE00";
// tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
for(var j=start+1; j<i; j++){ //
tab.rows[j].cells[col].style.display = "none";
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
} 

if(count > 1 ){ //合并,最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for(var j=start+1; j<i; j++) {
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
}
}
} 

第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即$("#ceshi").rowspan(0); 
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。

时间: 2024-07-31 13:41:19

封装Jquery 合并table中任何同列数据的相关文章

使用jquery合并表格中相同文本的相邻单元格

一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

关于Jquery获取Table中td内的内容

$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有内容$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容 遍历表<table id="gird"..... $("#grid tr").each(function() {     

jQuery遍历table中的tr td并获取td中的值

jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(function(){ <span style="white-space:pre"> </span> var year = $("#year").val(); var month = $("#month").val(); var da

JavaScript实现获取table中某一列的值

JavaScript实现获取table中某一列的值 1.实现源码 <!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> &

JavaScript获取table中某一列的值的方法

1.实现源码 <!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> <meta http-equiv="C

C# 获取ListView中选中行中对应的列数据

C# 获取ListView中选中行中对应的列数据 if (MediaList.SelectedIndices != null && MediaList.SelectedIndices.Count > 0) { ListView.SelectedIndexCollection c = MediaList.SelectedIndices; string mediaRtspUrl = MediaList.Items[c[0]].SubItems[2].Text.ToString(); }

读取一个文件每行中的各列数据

读取一个文件每行中的各列数据 1.被读取的文件内容 [[email protected] leekwen]# cat userpwd 1412230101 ty001 1412230102 ty002 1512430102 ty003 1511230102 ty004 1411230102 ty002 1411240102 yt005 1412290102 yt012 1510230102 yt022 1512231212 yt032 2.脚本命令 [[email protected] leek

Excel中的一列数据变成文本的一行数据

Excel中的一列数据变成文本的一行数据 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 原文地址:https://www.cnblogs.com/kailugaji/p/10867312.html

关于页面中table中相同的列自动合并

代码如下: <!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"> <meta http-equiv="Content-Type&qu