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>
作者:haoxl
出版:http://www.cnblogs.com/haoxl/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。