[JS&Jquery]实现页面表格中相同内容的行或列合并
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak
<script type="text/javascript" language="javascript">
//基于js写法
function hb() {
var tab = document.getElementById("subtable");
var maxCol = , val, count, start;
var ys = "";
for (var col = maxCol - ; col >= ; col--) {
count = ;
val = "";
for (var i = ; i < tab.rows.length; i++) {
if (val == tab.rows[i].cells[col].innerHTML) {
count++;
} else {
if (count > ) {
//合并
start = i - count;
if (ys == "#00FFFF") {
ys = "#EEEE00";
} else {
ys = "#00FFFF";
}
tab.rows[start].cells[col].rowSpan = count;
tab.rows[start].cells[].style.backgroundColor = ys; //改变颜色
// ys="#EEEE00";
// tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
for (var j = start + ; j < i; j++) { //
tab.rows[j].cells[col].style.display = "none";
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
count = ;
}
val = tab.rows[i].cells[col].innerHTML;
}
} if (count > ) { //合并,最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + ; j < i; j++) {
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
}
}
} //基于Jquery写法
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function _w_table_rowspan(_w_table_id, _w_table_colnum) {
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = ;
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
_w_table_Obj.each(function (i) {
if (i == ) {
_w_table_firsttd = $(this);
_w_table_SpanNum = ;
} else {
_w_table_currenttd = $(this);
if (_w_table_firsttd.text() == _w_table_currenttd.text()) { //这边注意不是val()属性,而是text()属性
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
} else {
_w_table_firsttd = $(this);
_w_table_SpanNum = ;
}
}
});
} //函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
// 如果为数字,则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id, _w_table_rownum, _w_table_maxcolnum) {
if (_w_table_maxcolnum == void ) { _w_table_maxcolnum = ; }
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = ;
$(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function (i) {
_w_table_Obj = $(this).children();
_w_table_Obj.each(function (i) {
if (i == ) {
_w_table_firsttd = $(this);
_w_table_SpanNum = ;
} else if ((_w_table_maxcolnum > ) && (i > _w_table_maxcolnum)) {
return "";
} else {
_w_table_currenttd = $(this);
if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("colSpan", _w_table_SpanNum);
} else {
_w_table_firsttd = $(this);
_w_table_SpanNum = ;
}
}
});
});
} </script>
[JS&Jquery]实现页面表格中相同内容的行或列合并的更多相关文章
- jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值
Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- avalon.js的循环操作在表格中的应用
avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...
- 如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...
- 根据excel表格中的内容更新Sql数据库
关于[无法创建链接服务器 "(null)" 的 OLE DB 访问接口 SQL Server 2008读取EXCEL数据时,可能会报这个错误:无法创建链接服务器 "(nu ...
- javascript jquery 修改指定标签中的内容
javascript jquery 修改指定标签中的内容 $("#test1").text("Hello world!"); document.getEleme ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- jquery.dataTables表格中的内容怎么设置让它不自动换行
在table中增加 style="white-space: nowrap;" ,这样会撑大td.会出现滚动条. 其他内容配置:每列宽度: "aoColumnDefs&qu ...
- js动态的往表格中加入表单元素
效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...
随机推荐
- django-连接mysql失败
如果你的数据库连接报错,缺少组件,可以安装以下的包 安装依赖(如果使用虚拟环境,需要在虚拟环境下安装) 安装mysql开发依赖包 sudo apt-get install libmysqlclie ...
- 跟我学算法-PCA(降维)基本原理推导
Pca首先 1.对数据进行去均值 2.构造一个基本的协方差矩阵1/m(X)*X^T 3对协方差矩阵进行变化,得到对角化矩阵,即对角化上有数值,其他位置上的数为0(协方差为0),即求特征值和特征向量的过 ...
- 跨域资源共享/option 请求产生原因
https://blog.csdn.net/hfahe/article/details/7730944
- 归纳整理Linux下C语言常用的库函数----字符串转换、字符测试、及内存控制
在没有IDE的时候,记住一些常用的库函数的函数名.参数.基本用法及注意事项是很有必要的. 参照Linux_C_HS.chm的目录,我大致将常用的函数分为一下几类: 1. 内存及字符串控制及操作 2. ...
- 微信小程序-滑动视图注意事项
真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...
- Centos7 下mariadb安装
1.创建 /etc/yum.repos.d/MariaDB.repo vim /etc/yum.repos.d/MariaDB.repo 添加如下内容: [mariadb]name=MariaDB ...
- NOSQL之Redis、MongDB、Habase、Cassandra的介绍与比较
一.Redis介绍 1.1Redis优点 (1)Redis拥有非常丰富的数据结构: (2)Redis提供事务的功能,可以保证一串命令的原子性,中间不会被任何打断. (3)数据存储在内存中,读写 ...
- Linux TCP拥塞控制算法原理解析
这里只是简单梳理TCP各版本的控制原理,对于基本的变量定义,可以参考以下链接: TCP基本拥塞控制http://blog.csdn.net/sicofield/article/details/9708 ...
- Oracle学习笔记(九)
十二.PL/SQL 1.PL/SQL程序的结构和组成 示例:给员工涨工资(根据职位涨工资) 总裁涨1000 经理涨800 其他员工涨400 学习原因:1.操作数据库效率最高 2.为了后期的存储过程的学 ...
- Gym 101201G Maximum Islands (最大独立集)
题意:给定一个图,L代表陆地,W代表水,C表示不确定,问你最多有多少岛. 析:首先给定的L周围必须是是W,只有这样才是最优的,因为如果是L,那么还得有另外的W来包围,不是最优的,那么剩下的就剩下C了, ...