用Javascript合并指定表格相同文本的相邻单元格

转载 2011年09月20日 10:40:25
 <html>
<head>
<title>Insert title here</title>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<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("#spdata",2);
 _w_table_rowspan("#spdata",1);
});
</script>

</head>
<body>
  <s:form action="RoleUserAction!add.action">
     备注<s:textfield name="auRoleuser.remark" value="10000"></s:textfield>
     <s:submit label="提交"></s:submit>
    </s:form>
    <br/>
<table id="spdata" style="table-layout:fixed;empty-cells:show;margin:0 auto;border-collapse: collapse;border:1px solid #cad9ea;margin:auto;" border="1">
<thead style="background-color:#CFE4F5;">
<tr>
<th style="width: 9%;">地区</th><th style="width: 5%;">地区</th><th style="width: 12%;">商品代码</th><th style="width: 12%;">商品名称</th><th style="width: 6%;">数量</th><th style="width: 10%;">有效期至</th><th style="width: 14%;">距效期(月)</th><th style="width: 10%;">产品批号</th><th style="width: 6%;">规格</th><th style="width: 6%;">单位</th><th style="width: 10%;">条形码</th>
</tr>
</thead>
<tbody>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00027</td>
<td>白花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>


</body>
</html>

Javascript学习笔记part1(Table单元格相同数据自动合并)

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • u011859137
  • u011859137
  • 2016年05月25日 21:34
  • 1244

使用VBA实现Excel合并相同内容的相邻单元格

写算法的数据分析时生成了csv文件,为了方便查看需要对部分单元格进行合并。 原始的CSV文件用Excel打开有大量如下形式的子表: 而我希望处理之后变成如下格式: 在网上搜索了很久,大多只能对...
  • Phoenix_SZX
  • Phoenix_SZX
  • 2015年03月10日 16:12
  • 2429

jquery 合并相邻且内容相同单元格

公用的方法: 1. //合并内容相同单元格 2. function mergeTableCell(table_id, table_colnum) { 3. _w_ta...
  • freellf
  • freellf
  • 2013年10月21日 00:08
  • 1457

Javascript合并表格相同内容单元格示例

效果图: HTML代码: 表格相同内容合并 合并前: a 1 2 3 4 5 a 1 2 ...
  • apollokk
  • apollokk
  • 2013年08月11日 01:48
  • 3617

HTML TBLE表格重复内容列合并javascript方法

先贴出来javascript代码  setInterval(function AutoMerge() { if ($('.table tbody tr').eq(0).data('merge...
  • kdf123
  • kdf123
  • 2015年11月12日 09:33
  • 1087

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

已经生成的数据表格大致内容如下:地区地区商品代码商品名称数量有效期至距效期(月)产品批号规格单位条形码广东深圳00028红花油       广东深圳00028红花油       广东深圳00028红花...
  • caojin723
  • caojin723
  • 2009年02月10日 14:02
  • 8794

VBA:单元格合并时内容也进行合并

选中单元格,在进行合并时,单元格的内容也进行合并,而不只是保留左上角单元格。...
  • youngmiffy
  • youngmiffy
  • 2016年11月16日 17:19
  • 781

Javascript学习笔记part1(Table单元格相同数据自动合并)补充

合并表格 window.onload = function () { init(table1, 6); }...
  • u011859137
  • u011859137
  • 2016年05月26日 11:39
  • 355

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

这篇文章主要介绍了jquery合并表格中相同文本的相邻单元格的相关资料,需要的朋友可以参考下 一、效果 二、代码 Example ...
  • ruoworuoli
  • ruoworuoli
  • 2016年08月26日 13:32
  • 336

js合并table单元格

在研发的过程中经常遇到的问题就是单元格合并问题,那么有了它就可以引刃而解了,接下来分享给大家!       接下来上js加载事件 function mc(table1, startRow, ...
  • liu_yujie2011com
  • liu_yujie2011com
  • 2017年03月09日 10:54
  • 1334
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript合并指定表格相同文本的相邻单元格
举报原因:
原因补充:

(最多只允许输入30个字)