JS实现表格中相同单元格合并-js教程-PHP中文网

首页

web前端

js教程

JS实现表格中相同单元格合并

php中世界最好的语言

Mar 15, 2018 pm 01:32 PM

javascript 单元格合并

这次给大家带来JS实现表格中相同单元格合并，JS实现表格中相同单元格合并的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<!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="js/jquery.js"></script> 
<script src="js/jquery-ui.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></td> 
<td>4</td> 
<td></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></td> 
<td>1</td> 
</tr> 
<tr> 
<td>11:00-12:00</td> 
<td></td> 
<td></td> 
<td></td> 
<td>1</td> 
</tr> 
</tbody> 
</table> 
<input type="button" value="合并" id="merge" onclick="merge2();"> 
</body> 
</html>

登录后复制

总结：在使用remove的时候，一定要注意如果从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7434

CakePHP 教程

1359

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

如何防止Excel删除前导零 Feb 29, 2024 am 10:00 AM

自动从Excel工作簿中删除前导零是否令人沮丧？当您在单元格中输入数字时，Excel通常会删除数字前面的前导零。默认情况下，它将缺少显式格式的单元格条目视为数值。前导零在数字格式中通常被认为是无关紧要的，因此被省略。此外，前导零可能会在某些数值运算中造成问题。因此，零被自动删除。本文将教你如何在Excel中保留前导零，以确保输入的帐号、邮政编码、电话号码等数字数据格式正确。在Excel中，如何允许数字前面有零？您可以在Excel工作簿中保留数字的前导零，有多种方法可供选择。您可以通过设置单元格格

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

WPS一个单元格分成两个 Mar 20, 2024 pm 06:00 PM

WPS软件作为文字，文档处理必不可少的帮手，在实际应用操作中，经常需要在单元格里进行操作，处理文字，文档，关于单元格的知识有很多。今天就让小编介绍一下关于WPS一个单元格怎么分成两个的具体操作步骤。1.首先我们打开需要编辑的WPS表格，选择需要将一个单元格分成两个的单元格文档。2.点击打开数据中的“分列”。3.然后在弹出来的窗口中选择“固定宽度”，点击“下一步”。4.在弹出来的窗口中点击需要分列的地方，回车确定。举一反三，此时如果需要改为3个，也可以将数字改为3。5.然后点击完成。6.还有一种方

Excel不断将数字更改为最新日期；将日期更改为随机数字 Feb 27, 2024 pm 02:28 PM

如果您在Excel中遇到数字被自动更改为日期，或者日期变成随机数字的问题，本文将提供解决方案。一些用户反映，当他们输入数字时，数字会自动变成日期。这一问题通常是由单元格格式引起的。Excel不断将数字更改为最新如果MicrosoftExcel中的数字一直更改为日期，则可以使用以下方法解决此问题：将单元格设置为文本格式。在数字前插入撇号。使用选择性粘贴。1]将单元格设置为文本格式要防止Excel自动调整数字格式，首先需要将相关单元格的格式更改为文本。下面是实现此目的的简单步骤：首先，用数字选择所有

如何在Excel中对多个工作表中的单元格求和 Feb 19, 2024 pm 01:57 PM

本文将演示如何在Excel中对多个工作表中的单元格进行求和。MicrosoftExcel是一个功能强大的电子表格程序，用于数据管理。在处理数据时，可能需要跨多个单元格进行求和。本指南将指导您如何轻松实现这一目标。如何在Excel中对多个工作表中的单元格求和在Excel中对多个工作表中的单元格求和时，可能会遇到以下两种情况：添加单个单元格值在单元格区域中添加值我们将在这里介绍这两种方法。在Excel中跨多个工作表添加单个单元格值我们收集了包含6家不同公司在连续四个月(从1月到4月)的销售额的样本数

See all articles

JS实现表格中相同单元格合并

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题