封装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里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。
封装Jquery 合并table中任何同列数据的更多相关文章
- 合并table中某一列相邻的相同的行
合并table中某一列相邻的相同的行1. [代码]合并table中某一列相邻的相同的行 <!DOCTYPE html><html> <head> ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- JavaScript实现获取table中某一列的值
JavaScript实现获取table中某一列的值 1.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- jQuery 在Table中选择input之类的东西注意事项
jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- JavaScript获取table中某一列的值的方法
1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- C# 获取ListView中选中行中对应的列数据
C# 获取ListView中选中行中对应的列数据 ) { ListView.SelectedIndexCollection c = MediaList.SelectedIndices; ]].SubI ...
- Excel中的一列数据变成文本的一行数据
Excel中的一列数据变成文本的一行数据 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/
随机推荐
- 3.数码相框-通过freetype库实现矢量显示
本章主要内容如下: 1)矢量字体原理 2)使用freetype库实现矢量字体显示 1. 矢量字体原理 将汉字的笔划边缘用直线段描述成封闭的曲线,并将线段各端点的坐标经压缩存储,如下图所示: 由于每个汉 ...
- PAT Public Bike Management (dfs)
思路:你的答案必须满足三个条件: 1.在所有路径中选择最短的: 2.如果路径相等,则选择从PBMC中送出最少的: 3.如果路径相等且PBMC送出的车也相等,则选择带回最少的. 注意:这题很恶心,你要考 ...
- Acm弱校奋斗史
我也是来自弱校的,没有教练,甚至老师都不理我们这种Acmer.看完这篇文章感触颇深. 原文链接 http://acmicpc.info/archives/369 原文 题解:还记得2年前的一个晚上,我 ...
- JS-随机生成的密码
randPassword(size) =>{ //数组 let seed = new Array('A','B','C','D','E','F','G','H','I','J','K','L', ...
- django框架 - 环境的搭建
本章介绍django的mac环境的搭建,IDE使用的是pycharm,步骤如下: 第一步:新建项目 第二步:选择django项目模版 第三步:在终端中使用命令创建myapp应用 第四步:在settin ...
- mongodb去除重复的数据
里边的内容在某些情况下不可行,可以参考下一篇. 今天出现了一个新的需求,有个部门需要拿到mongodb中的数据,要求去掉其中一个字段内容相同的数据. 虽然mongodb中有distinct来去重,但是 ...
- 利用Java API生成50到100之间的随机数
利用Java API生成50到100之间的随机数 /** * */ package com.you.demo; import java.util.Random; /** * @author Admin ...
- org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException
1.错误原因 org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't ...
- 芝麻HTTP:JavaScript加密逻辑分析与Python模拟执行实现数据爬取
本节来说明一下 JavaScript 加密逻辑分析并利用 Python 模拟执行 JavaScript 实现数据爬取的过程.在这里以中国空气质量在线监测分析平台为例来进行分析,主要分析其加密逻辑及破解 ...
- CF371 D Searching Rectangles
基本思路就是二分 每条边分别二分求 c++11 用fflush(sdtout) 不行 囧啊 #include<bits/stdc++.h> using namespace std; int ...