知识大全 JQuery实现表格中相同单元格合并示例代码

Posted 2022-07-20 元素

篇首语：博观而约取，厚积而薄发。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 JQuery实现表格中相同单元格合并示例代码相关的知识，希望对你有一定的参考价值。

JQuery实现表格中相同单元格合并示例代码 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

一定要注意如果从list的开始元素循环下去 remove掉一个元素后有些元素就找不到了或者说不是要找的那个元素感兴趣的各位可以研究下哈

　　代码

复制代码代码如下: <!DOCTYPE > <> <head> <title>merge </title> <meta equiv="keywords" content="keyword keyword keyword "> <meta equiv="description" content="this is my page"> <meta equiv="content type" content="text/; charset=UTF "> <link rel="stylesheet" href="css/jquery ui css" /> <script src=js/jquery js></script> <script src=js/jquery ui js></script> <script type=text/javascript> function merge () //可实现单元格通过给开始cell的比较 var totalRow = $("#tbl") find("tr") length; var totalCol = $("#tbl") find("tr") eq( ) find("td") length; for(var col=totalCol ;col>= ;col ) spanNum = ; startCell = $("#tbl") find("tr") eq(totalRow ) find("td") eq(col); for(var row = totalRow ;row>= ;row ) targetCell = $("#tbl") find("tr") eq(row ) find("td") eq(col); if(startCell text() == targetCell text() && startCell text()!="") spanNum++; targetCell attr("rowSpan" spanNum); startCell remove(); else spanNum = ; startCell = targetCell; function merge () //可实现合并单元格上下行来比较 var totalCols = $("#tbl") find("tr:eq( )") find("td") length; var totalRows = $("#tbl") find("tr") length; for ( var i = totalCols ; i >= ; i ) for ( var j = totalRows ; j >= ; j ) startCell = $("#tbl") find("tr") eq(j) find("td") eq(i); targetCell = $("#tbl") find("tr") eq(j ) find("td") eq(i); if (startCell text() == targetCell text() && targetCell text() != "") targetCell attr("rowSpan" (startCell attr("rowSpan")==undefined)? :(eval(startCell attr("rowSpan"))+ )); startCell remove(); /*先合并使用style 的display:none将相同元素隐藏然后再remove */ function merge () var totalCols = $("#tbl") find("tr:eq( )") find("td") length; var totalRows = $("#tbl") find("tr") length; for(var col=totalCols ;col>= ;col ) spanNum = ; startCell = $("#tbl") find("tr") eq(totalRows ) find("td") eq(col); for(var row = totalRows ;row>= ;row ) targetCell = $("#tbl") find("tr") eq(row ) 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 = ; startCell = targetCell; for(var j=totalCols ;j>= ;j ) for(var i=totalRows ;i>= ;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 merge () //与merge 方法类似目的是看一下 display:none与visibility:hidden的效果区别 var totalCols = $("#tbl") find("tr:eq( )") find("td") length; var totalRows = $("#tbl") find("tr") length; for(var col=totalCols ;col>= ;col ) spanNum = ; startCell = $("#tbl") find("tr") eq(totalRows ) find("td") eq(col); for(var row = totalRows ;row>= ;row ) targetCell = $("#tbl") find("tr") eq(row ) 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 = ; startCell = targetCell; for(var j=totalCols ;j>= ;j ) for(var i=totalRows ;i>= ;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=" " border= > <thead> <tr> <td>销售时间</td> <td>裙子</td> <td>裤子</td> <td>风衣</td> <td>鞋子</td> </tr> </thead> <tbody> <tr> <td> : : </td> <td> </td> <td></td> <td> </td> <td></td> </tr> <tr> <td> : : </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> : : </td> <td> </td> <td> </td> <td></td> <td> </td> </tr> <tr> <td> : : </td> <td></td> <td></td> <td></td> <td> </td> </tr> </tbody> </table> <input type=button value="合并" id="merge" onclick="merge ();"> </body> </> cha138/Article/program/Java/JSP/201311/19873