作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:55:55 阅读 我要评论

ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 广州 00027 白花油 广东 广州 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 需要将前四列具有相同文本的相邻单元格进行自动合并,合并后如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油 广州 00027 白花油 00028 红花油 深圳 1、在html的head中引入jQuery 2、添加合并单元格的函数复制代码 代码如下: //函数说明:合并指定表格(表格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; } } }); }); } 3、在html的head中调用合并函数合并单元格 复制代码 代码如下: <script type="text/javascript"><!-- $(document).ready(function(){ _w_table_rowspan("#spdata",4); _w_table_rowspan("#spdata",3); _w_table_rowspan("#spdata",2); _w_table_rowspan("#spdata",1); }); // --> </script>

  推荐阅读

  仅IE6/7/8中innerHTML返回值忽略英文空格的问题

如下 复制代码 代码如下: <div id="user"> jack</div> <script> alert(document.getElementById('user').innerHTML.length); </script> div[id=user]中的文本"jack"前有两个英文空格,各浏览器下结果如下 IE6/7/8>>>详细阅读


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

地址:http://www.17bianji.com/kaifa2/JS/24729.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)