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

本文介绍了jQuery合并HTML表格单元格的方法。分享给大家参考，如下：

运行效果截图如下：

合并前：

合并后：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title script src=' http 3360 jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/script脚本类型='合并指定表格（表格编号为表_id)指定列（列数为table_colnum)的相同文本的相邻单元格* @表_id表格id :为需要进行合并单元格的表格的身份证。如在超文本标记语言中指定表格id='数据，此参数应为#data * @table_colnum :为需要合并单元格的所在列。参考框架中第n个孩子的参数。若为数字，从最左边第一列为一开始算起；偶数表示偶数列；'奇怪'表示奇数列；3n 1 '表示的列数为1、4、7、* @table_minrow？ 可选的，表示要合并列的行数最小的列，省略表示从第0行开始（闭区间)* @table_maxrow？ 可选的，表示要合并列的行数最大的列，省略表示最大行列数为表格最后一行（开区间)*/function table _ row span(table _ id，table _ colnum){ if(table _ colnum==' even '){ table _ colnum=' 2n '；} else if(table _ colnum==' odd '){ table _ colnum=' 2n 1 '；} else { table _ colnum=' ' table _ colnum；} var cols=[]；var all _ row _ num=$(table _ id ' tr TD : th-child(1)').长度；var all _ col _ num=$(table _ id ' tr : th-child(1)').儿童()。长度；if(table _ colnum。indexof(' n ')==-1){ cols[0]=table _ colnum；} else { var n=0；var a=table_colnum.substring(0，table_colnum。index of(' n ')；var b=table _ colnum。子字符串(table _ colnum。indexof(' n ')1)；//alert(' a=' a ' b='(b==true))；a=a？parseInt(a): 1；b=b？parseInt(b): 0；//alert(b)；while(a * n b=all _ col _ num){ cols[n]=a * n b；n；}}var table_minrow=参数[2]?参数[2]: 0;var table_maxrow=参数[3]?参数[3]: all _ row _ num 1；var table _ first TD=var table _ current TD=var table _ SpanNum=0；for(var j=0；j cols . length j){ $(table _ id ' tr TD : th-child(' cols[j]')').切片(table_minrow，table_maxrow).每个（函数(I){ var table _ col _ obj=$(this)；if (table_col_obj.html()！=' '){ if(I==0){ table _ first TD=$(this)；table _ SpanNum=1；} else { table _ current TD=$(this)；if(table _ first TD。text()==table _ current TD。text()){ table _ SPanNum；表_当前TD。hide()；//移除();table_firsttd.attr('rowSpan '，table _ SPanNum)；} else { table _ first TD=$(this)；table _ SpanNum=1；}}}});}}/*** desc :合并指定表格（表格编号为表_id)指定行（行数为table_rownum)的相同文本的相邻单元格* @表_id表格id :为需要进行合并单元格的表格的身份证。

如在超文本标记语言中指定表格id='数据，此参数应为#data * @table_rownum :为需要合并单元格的所在行。参考框架中第n个孩子的参数。若为数字，从最左边第一列为一开始算起；偶数表示偶数行；'奇怪'表示奇数行；3n 1 '表示的行数为1、4、7、* @table_mincolnum？ 可选的，表示要合并行中的最小列，省略表示从第0列开始（闭区间)* @table_maxcolnum？ 可选的，表示要合并行中的最大列，省略表示表格的最大列数（开区间)*/function table _ col span(table _ id，table _ row num){//if(table _ maxcolnum==void 0){ table _ maxcolnum=0；} var table _ min colnum=arguments[2]？参数[2]: 0;var table _ maxcolnumvar table _ first TD=var table _ current TD=var table _ spanNum=0；$(table _ id ' tr : th-child(' table _ row num ')).每个（函数(i) {table_row_obj=$(this).儿童();table_maxcolnum=参数[3]?参数[3]: table _ row _ obj。长度；table _ row _ obj。切片(table _ min colnum，table_maxcolnum).每个（函数(I){ if(I==0){ table _ first TD=$(this)；table _ SpanNum=1；} else if((table _ maxcolnum 0)(I table _ maxcolnum)){ return " "；} else { table _ current TD=$(this)；if(table _ first TD。text()==table _ current TD。text()){ table _ SPanNum；if(table _ current TD。是(' :可见'){ table _ first TD。宽度(parseInt(table _ first TD。width())parsent(table _ current TD。width())))；} table _ current TD。hide()；//移除();table_firsttd.attr('colSpan '，table _ SPanNum)；} else { table _ first TD=$(this)；table _ SpanNum=1；}}});});}/script/head dytable width=' 400 ' border=' 1 ' id=' table 1 ' trtd align=' center ' a/TDT for/TDT for/TDT d 100/TDT 200/TDT d 200/TD/TRT TDA/TDT for/TDT 150/TDT d 230/TDT d 200/TD/TRT DD/TDT if/TDT df/TDT d 100/TDT d 200/TDT d 200/TDT d 200/TDT合并表格2 ' OnClick=' table _ col span '(# table 1，1)'输入类型='按钮'值='合并表格1 ' OnClick=' table _ row span(' table 1，1 ')'/body/html更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文对大家的jQuery程序设计有所帮助。