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 id="process" cellpadding="2" cellspacing="0" border="1">
<thead>
<tr >
<td>col0</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</thead>
<tbody>
<tr>
<td>SuZhou</td>
<td>11111</td>
<td>22222</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>SuZhou</td>
<td>33333</td>
<td>44444</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>SuZhou</td>
<td>55555</td>
<td>66666</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>77777</td>
<td>88888</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>uuuuu</td>
<td>hhhhh</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>ggggg</td>
<td>ccccc</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>GuangZhou</td>
<td>ttttt</td>
<td>eeeee</td>
<td>GuangZhouCity</td>
</tr>
<tr>
<td>GuangZhou</td>
<td>ppppp</td>
<td>qqqqq</td>
<td>GuangZhouCity</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格
//参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
//参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
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(" + _w_table_colnum + ")");
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}
}
});
}
//函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格
//参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data
//参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
// 如果为数字，则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为1、4、7、10.......
//参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = 0;
$(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){
_w_table_Obj = $(this).children();
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){
return "";
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("colSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}
}
});
});
}
$(document).ready(function(){
// _w_table_rowspan("#process",4);
// _w_table_rowspan("#process",3);
// _w_table_rowspan("#process",2);
_w_table_rowspan("#process",1);
});
</script>
</body>
</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实现表格中相同单元格合并示例代码
代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this
-
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的合并表格中相同文本的相邻单元格的代码
ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 广州 00027 白花油 广东 广州 00028 红花油 广东 深圳 00028 红花油 广东
-
基于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
-
合并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实现相同内容合并单元格的代码
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 复制代码 代码如下: <script type="text/javascript"> jQuery
-
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合并表格中相同文本的相邻单元格
一.效果 二.代码 <!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>
-
在antd Table中插入可编辑的单元格实例
最近遇到一个需求,要求表格中某一属性是可以手动改变的.看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下. 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀.具体代码见贴图 补充知识:React+Ant Design实现可编辑单元格.添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表
-
python实现对excel中需要的数据的单元格填充颜色
前言: 一般处理数据使用的是pandas和numpy库,但是填充单元格颜色需要在excel中,使用的是openpyxl库,所以不能直接达到我们的需求,需要进行两个库的链接使用,先说下openpyxl填充色,pandas是直接读取数据,但是openpyxl则不是,必须要sheet处于active状态,而且必须进行sheet选择才可以读取数据 import openpyxl from openpyxl import load_workbook # 比如打开test.xlsx wb = load_wo
-
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同
-
查询绑定数据岛的表格中的文本并修改显示方式的js代码
复制代码 代码如下: <script language="JavaScript"> function findAll(s){ if(s.length==0){ alert("请输入查询关键字"); } s=encode(s); var TDs=document.all.DataT1.all.tags("TD"); var num=0; for(var i=0;i<TDs.length;i++){ var tdObj=TDs[i]
-
Javascript合并表格中具有相同内容单元格示例
效果图: 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.w3.org/1999/xhtml"> <head> <meta
-
JavaScript动态操作表格实例(添加,删除行,列及单元格)
复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI