jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现，其中num为要合并的行数。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
td{
border:1px solid red;
}
</style>
</head>
<body>
<table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table1">
<thead>
<tr>
<th>品牌</th>
<th>车型</th>
<th>性别</th>
<th>配额数</th>
<th>完成数</th>
</tr>
</thead>
<tbody>
<tr>
<td>宝马</td>
<td>3系</td>
<td>男</td>
<td>200</td>
<td>100</td>
</tr>
<tr>
<td>宝马</td>
<td>3系</td>
<td>女</td>
<td>100</td>
<td>57</td>
</tr>
<tr>
<td>宝马</td>
<td>5系</td>
<td>男</td>
<td>100</td>
<td>68</td>
</tr>
<tr>
<td>宝马</td>
<td>5系</td>
<td>女</td>
<td>200</td>
<td>94</td>
</tr>
<tr>
<td >宝马</td>
<td>7系</td>
<td>男</td>
<td>100</td>
<td>68</td>
</tr>
<tr>
<td>宝马</td>
<td>7系</td>
<td>女</td>
<td>100</td>
<td>68</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="design/static/js/jquery.js"></script>
<script src="design/static/js/jquery-ui-1.10.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);
$("#table1").rowspan(2);
$("#table1").rowspan(3);
});
</script>
其它几种方法：
<!DOCTYPE html>
<html>
<head>
<title>merge.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="design/static/js/jquery.js"></script>
<script src="design/static/js/jquery-ui-1.10.min.js"></script>
<script type="text/javascript">
function merge1(){ //可实现单元格，通过给 开始cell的比较
var totalRow = $("#tbl").find("tr").length;
var totalCol = $("#tbl").find("tr").eq(0).find("td").length;
for(var col=totalCol-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);
for(var row = totalRow-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.remove();
}else{
spanNum =1;
}
startCell = targetCell;
}
}
}
function merge2() { //可实现合并单元格,上下行来比较
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for ( var i = totalCols-1; i >= 1; i--) {
for ( var j = totalRows-1; j >= 1; j--) {
startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);
if (startCell.text() == targetCell.text() && targetCell.text() != "") {
targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));
startCell.remove();
}
}
}
}
/*先合并，使用style 的display:none将相同元素隐藏，然后再remove
*/
function merge3(){
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","visibility:hidden");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="visibility:hidden"){
cell.remove();
}
}
}
}
}
function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","display:none");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="display:none"){
cell.remove();
}
}
}
}
}
</script>
</head>
<body>
<table id="tbl" cellpadding="3" border=1>
<thead>
<tr>
<td>销售时间</td>
<td>裙子</td>
<td>裤子</td>
<td>风衣</td>
<td>鞋子</td>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:00</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>9:00-10:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>10:00-11:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>11:00-12:00</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>1</td>
</tr>
</tbody>
</table>
<input type="button" value="合并" id="merge" onclick="merge2();">
</body>
</html>
jquery动态合并表格行的更多相关文章
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...
- 合并表格行---三层for循环遍历数据
合并表格行---三层for循环遍历数据 示例1 json <!DOCTYPE html> <html lang="zh_cn"> <head> ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Jquery动态插入table行
想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...
- JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
随机推荐
- 扩展欧几里得 exGCD
Elementary Number Theory - Extended Euclid Algorithm Time Limit : 1 sec, Memory Limit : 65536 KB Jap ...
- React Diff算法
Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化.在React中,构建UI界面的思路是由当前状态决定界面.前后两个状态就对应两套界面,然后由React来比较 ...
- install scrapy-redis on centos
wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpmrpm -ivh epel-release- ...
- bzoj2702[SDOI2012]走迷宫
题意:给你一个有向图,点数10000,边数1000000,SCC大小不超过100(按数据范围的写法只有第三部分数据满足这个条件,不过第二部分数据并没有出现大小大于100个点的SCC,我是用数组大小为1 ...
- C#读取Excel,或者多个excel表，返回dataset
把excel 表作为一个数据源进行读取 /// <summary> /// 读取Excel单个Sheet /// </summary> /// <param name=& ...
- strchr()函数 和 strrchr() 函数
strchr 定义于头文件 <string.h>char *strchr( const char *str, int ch );寻找ch(按照如同(char)ch的方式转换成char后)在 ...
- sift特征源码
先贴上我对Opencv3.1中sift源码的注释吧,虽然还有很多没看懂.先从detectAndCompute看起 void SIFT_Impl::detectAndCompute(InputArray ...
- pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...
- MyEclipse10--的使用经验
MyEclipse10--的使用经验总结 ------------------ 1.MyEclipse中的验证validation----->>用MyEclipse做ExtJs项目研发的时 ...
- sql杀死进程
查询SQL所有的链接 并可以查看连接当前正在做什么操作..使用的什么语句.. SELECT spid, blocked, DB_NAME(sp.dbid) AS DBName, program_na ...