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

代码：


代码如下:

<!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掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。

赞 (0)

相关推荐

  • jQuery实现HTML表格单元格的合并功能

    jQuery实现HTML表格单元格的合并功能

    本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

  • jquery miniui 教程 表格控件 合并单元格应用

    jquery miniui 教程 表格控件 合并单元格应用

    表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3

  • jquery 合并内容相同的单元格(示例代码)

    如下所示: 复制代码 代码如下: function _w_table_rowspan(_w_table_id,_w_table_colnum){        _w_table_firsttd = "";        _w_table_currenttd = "";        _w_table_SpanNum = 0;        _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _

  • 基于JQuery实现相同内容合并单元格的代码

    基于JQuery实现相同内容合并单元格的代码

    web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 复制代码 代码如下: <script type="text/javascript"> jQuery

  • 基于jquery的合并table相同单元格的插件(精简版)

    效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

  • 基于jQuery的合并表格中相同文本的相邻单元格的代码

    ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

  • jquery合并表格中相同文本的相邻单元格

    jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

  • 合并table相同单元格的jquery插件分享(很精简)

    效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

  • jquery 动态合并单元格的实现方法

    如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab

  • JQuery实现表格中相同单元格合并示例代码

    代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this

  • C#实现拆分合并Word表格中的单元格

    目录 程序环境 在Word表格中合并单元格 完整代码 效果图 在Word表格中拆分单元格 完整代码 效果图 我们在使用Word制作表格时,由于表格较为复杂,只是简单的插入行.列并不能满足我们的需要.要做一个完整的表格,很多时候需要将单元格进行拆分或者合并,才能达到我们想要的效果.那么具体要如何操作呢?别担心,本文将详细为您介绍在Word表格中拆分或合并单元格的思路及方法. 在Word表格中合并单元格 在Word表格中拆分单元格 程序环境 本次测试时,在程序中引入Free Spire.Doc fo

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • 使用jQuery 操作table 完成单元格合并的实例

    比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断 若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比

  • JSP中动态合并单元格的实例代码

    废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

  • 在Layui中操作数据表格,给指定单元格添加事件示例

    最近入坑Layui这个为服务端程序员量身定做的前端框架. 为什么不用vue结合各种流行前端框架Element.iView啊什么,后台大哥们不会啊!!! 只好我来迁就他们呢,还得一点一点儿的学起来. 当我们在操作数据表格的时候,并不是一定要点击表格工具栏中的"查看"按钮,来进行查看,而是点击某一特定的列来进行某些数据查看.例如下图这样. 这就涉及到表格的自定义事件.代码如下: <table id='task-list' lay-filter='task-list'></

  • ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • GridView单元格合并

    #region 合并单元格 合并某一行的所有列 /// <summary> /// 合并GridView中某行相同信息的行(单元格) /// </summary> /// <param name="GridView1">GridView对象</param> /// <param name="cellNum">需要合并的行</param> public static void GroupRow(G

  • vue+elementui实现点击table中的单元格触发事件--弹框

    elementui中提供了点击行处理事件 查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180

随机推荐