table表格合并列中相同的内容
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <table id="table1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>555</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>888</td>
<td>333</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>333</td>
</tr>
</table> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script> 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;
}
});
});
});
}
$(function() {
$("#table1").rowspan(0);//传入的参数是对应的列数从0开始 第一列合并相同
// $("#table1").rowspan(1);//传入的参数是对应的列数从0开始 第二列合并相同
});
</script> </script>
</html>
合并前:
合并后:(根据实际项目需求,只合并第一列)
方法二:
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库里面,其他页面可以直接调用。
第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。但是思路可以学习一下。
table表格合并列中相同的内容的更多相关文章
- table表格宽度固定,同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- asp.net table/gridview 合并列
public void MergeCell(TableRow trow) { TableCell currentCell = trow.Cells[0]; TableCell prevCell = n ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- 普通table表格样式及代码大全
普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#0 ...
- html - table 表格不被撑开,td某些列宽度固定某些列自适应
table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- table表格整体居中 和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- 关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...
随机推荐
- 【2019NOIP复习计划】
(其实不应该这么叫的,应该是CSP-S了现在..) 重点关注的板子: 不知道为什么特别受出题人青睐的LCA(板子点这里) 配套练习:(紫题请自便) (这题蓝的应该可以试试) (对的这题也紫它还是道 ...
- Web Server 分布式服务: Nginx负载均衡
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler使用.其 ...
- 选择最佳策略:简单的方式和globals()
promos = [fidelity_promo, bulk_item_promo, large_order_promo] ➊ def best_promo(order): ➋ "" ...
- Linux下一种高效多定时器实现
Linux下一种高效多定时器实现 作者:LouisozZ 日期:2018.08.29 运行环境说明 由于在 Linux 系统下一个进程只能设置一个时钟定时器,所以当应用需要有多个定时器来共同管理程序运 ...
- configure,make和make install关系
linux编译安装中configure.make和make install各自的作用 ./configure是用来检测你的安装平台的目标特征的.configure根据给定的参数和系统环境会生成Make ...
- 轻松入门CAS系列(1)-轻松看懂企业单点登录的解决方案
常见的企业应用情况 企业内部的信息化一般都是一个过程中的 ,起初企业为了部分管理的需要,会上线几个信息化系统:后来对这块慢慢重视,信息系统会越来越多.开始,只有一两个系统时,员工还好,靠脑袋还能记得住 ...
- Swagger学习(四、配置API文档的分组)
完整示例 代码结构 运行效果 SwaggerConfig.class @Configuration //变成配置文件 @EnableSwagger2 //开启swagger2 public class ...
- python解决导入自定义库失败: ModuleNotFoundError: No module named 'MyLib'
python安装目录:...\python_3_6_1_64bit 新建文件:chenyeubai.pth,写入库所在的绝对路径E:\workSpace\my_code\learn\myLib 安装路 ...
- MySQL无法启动:ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
1 详细异常 ct 11 17:31:51 bd02.getngo.com mysqld[20513]: 2019-10-11T09:31:51.187848Z 0 [Note] /usr/sbin/ ...
- Oracle笔记(十六) 数据库设计范式
数据库设计范式是一个很重要的概念,但是这个重要程度只适合于参考.使用数据库设计范式,可以让数据表更好的进行数据的保存,因为再合理的设计,如果数据量一大也肯定会存在性能上的问题.所以在开发之中,唯一可以 ...