JQuery实现表格中相同单元格合并示例代码
程序员文章站
2022-11-26 23:26:39
代码：
. 代码如下:
merge.html...</div>
<div class="content">
<p>代码：</p>
<p class="codetitle"><span onclick="doCopy('code37476')" style="CURSOR: pointer"><u>.</u></span> 代码如下:</p>
<p class="codebody" id="code37476"><br>
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>merge.html</title><br>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br>
<meta http-equiv="description" content="this is my page"><br>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><br>
<link rel="stylesheet" href="css/jquery-ui.css" /><br>
<script src="js/jquery.js"></script><br>
<script src="js/jquery-ui.js"></script><br>
<script type="text/javascript"><br>
function merge1(){ //可实现单元格，通过给 开始cell的比较<br>
var totalRow = $("#tbl").find("tr").length;<br>
var totalCol = $("#tbl").find("tr").eq(0).find("td").length;<br>
for(var col=totalCol-1;col>=1;col--){<br>
spanNum =1;<br>
startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);<br>
for(var row = totalRow-1;row>=1;row--){<br>
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);<br>
if(startCell.text() == targetCell.text() && startCell.text()!=""){<br>
spanNum++;<br>
targetCell.attr("rowSpan",spanNum);<br>
startCell.remove();<br>
}else{<br>
spanNum =1;<br>
}<br>
startCell = targetCell;<br>
}<br>
}<br>
}<br>
function merge2() { //可实现合并单元格,上下行来比较<br>
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;<br>
var totalRows = $("#tbl").find("tr").length;<br>
for ( var i = totalCols-1; i >= 1; i--) {<br>
for ( var j = totalRows-1; j >= 1; j--) {<br>
startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);<br>
targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);<br>
if (startCell.text() == targetCell.text() && targetCell.text() != "") {<br>
targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));<br>
startCell.remove();<br>
}<br>
}<br>
}<br>
}<br>
/*先合并，使用style 的display:none将相同元素隐藏，然后再remove<br>
*/<br>
function merge3(){<br>
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;<br>
var totalRows = $("#tbl").find("tr").length;<br>
for(var col=totalCols-1;col>=1;col--){<br>
spanNum =1;<br>
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);<br>
for(var row = totalRows-1;row>=1;row--){<br>
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);<br>
if(startCell.text() == targetCell.text() && startCell.text()!=""){<br>
spanNum++;<br>
targetCell.attr("rowSpan",spanNum);<br>
startCell.attr("style","visibility:hidden");<br>
// startCell.attr("style","display:none");<br>
}else{<br>
spanNum =1;<br>
}<br>
startCell = targetCell;<br>
}<br>
}<br>
for(var j=totalCols-1;j>=1;j--){<br>
for(var i=totalRows-1;i>=1;i--){<br>
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);<br>
if(cell.attr("style")!=undefined){<br>
if(cell.attr("style")=="visibility:hidden"){<br>
cell.remove();<br>
}<br>
}<br>
}<br>
}<br>
}<br>
function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别<br>
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;<br>
var totalRows = $("#tbl").find("tr").length;<br>
for(var col=totalCols-1;col>=1;col--){<br>
spanNum =1;<br>
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);<br>
for(var row = totalRows-1;row>=1;row--){<br>
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);<br>
if(startCell.text() == targetCell.text() && startCell.text()!=""){<br>
spanNum++;<br>
targetCell.attr("rowSpan",spanNum);<br>
startCell.attr("style","display:none");<br>
// startCell.attr("style","display:none");<br>
}else{<br>
spanNum =1;<br>
}<br>
startCell = targetCell;<br>
}<br>
}<br>
for(var j=totalCols-1;j>=1;j--){<br>
for(var i=totalRows-1;i>=1;i--){<br>
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);<br>
if(cell.attr("style")!=undefined){<br>
if(cell.attr("style")=="display:none"){<br>
cell.remove();<br>
}<br>
}<br>
}<br>
}<br>
}<br>
</script><br>
</head><br>
<body><br>
<table id="tbl" cellpadding="3" border=1><br>
<thead><br>
<tr><br>
<td>销售时间</td><br>
<td>裙子</td><br>
<td>裤子</td><br>
<td>风衣</td><br>
<td>鞋子</td><br>
</tr><br>
</thead><br>
<tbody><br>
<tr><br>
<td>8:00-9:00</td><br>
<td>3</td><br>
<td></td><br>
<td>4</td><br>
<td></td><br>
</tr><br>
<tr><br>
<td>9:00-10:00</td><br>
<td>3</td><br>
<td>2</td><br>
<td>5</td><br>
<td>3</td><br>
</tr><br>
<tr><br>
<td>10:00-11:00</td><br>
<td>3</td><br>
<td>2</td><br>
<td></td><br>
<td>1</td><br>
</tr><br>
<tr><br>
<td>11:00-12:00</td><br>
<td></td><br>
<td></td><br>
<td></td><br>
<td>1</td><br>
</tr><br>
</tbody><br>
</table><br>
<input type="button" value="合并" id="merge" onclick="merge2();"><br>
</body><br>
</html></p>
<br><strong>总结：</strong>在使用remove的时候，一定要注意如果 从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。 </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1927984.html">
红尘里等待那场花事 </a>
</p>
<p>
下一篇： <a href="/article/1927986.html">
美国最强超算挖矿如何？月赚236万美元、9年回本 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2059666.html" target="_blank" title="vue.js实现表格合并示例代码">
<h2>
vue.js实现表格合并示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1927985.html" target="_blank" title="JQuery实现表格中相同单元格合并示例代码">
<h2>
JQuery实现表格中相同单元格合并示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1859484.html" target="_blank" title="Bootstrap实现的表格合并单元格示例">
<h2>
Bootstrap实现的表格合并单元格示例 </h2>
</a>
</li>
<li>
<a href="/article/1831993.html" target="_blank" title="element-ui中Table表格省市区合并单元格的方法实现">
<h2>
element-ui中Table表格省市区合并单元格的方法实现 </h2>
</a>
</li>
<li>
<a href="/article/1819721.html" target="_blank" title="jQuery合并同一列中相同文本的相邻单元格">
<h2>
jQuery合并同一列中相同文本的相邻单元格 </h2>
</a>
</li>
<li>
<a href="/article/1739710.html" target="_blank" title="实现前台表格中相同数据单元格的合并">
<h2>
实现前台表格中相同数据单元格的合并 </h2>
</a>
</li>
<li>
<a href="/article/1739569.html" target="_blank" title="Javascript合并表格中具有相同内容的单元格">
<h2>
Javascript合并表格中具有相同内容的单元格 </h2>
</a>
</li>
<li>
<a href="/article/1655059.html" target="_blank" title="Vue+jquery实现表格指定列的文字收缩的示例代码">
<h2>
Vue+jquery实现表格指定列的文字收缩的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1527789.html" target="_blank" title="VUE页面中通过双击实现复制表格中内容的示例代码">
<h2>
VUE页面中通过双击实现复制表格中内容的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1378541.html" target="_blank" title="JS 实现Table相同行的单元格自动合并示例代码_javascript技巧">
<h2>
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>