利用jquery-latest.js实现合并table行
2014-03-24 17:41
344 查看
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery-latest.js实现合并table行</title> <script src="Scripts/jquery-1.7.1.js"></script> <script src="Scripts/jquery-latest.js"></script> <script type="text/javascript"> $(function () { $.fn.rowspan = function (options) { var defaults = {} var options = $.extend(defaults, options); this.each(function () { var tds = $(this).find("tbody td:nth-child(" + options.td + ")"); var current_td = tds.eq(0); var k = 1; tds.each(function (index, element) { if ($(this).text() == current_td.text() && index != 0) { k++; $(this).remove(); current_td.attr("rowspan", k); current_td.css("vertical-align", "middle"); } else { current_td = $(this); k = 1; } }); }) }; $("#my-table").rowspan({ td: 1 }); }); </script> </head> <body> <table id="my-table"> <thead> <tr> <th>姓名</th> <th>学科</th> <th>学分</th> </tr> </thead> <tbody> <tr> <td>小铭</td> <td>数学</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>英语</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>化学</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>美术</td> <td>100</td> </tr> <tr> <td>小红</td> <td>数学</td> <td>100</td> </tr> <tr> <td>小红</td> <td>英语</td> <td>100</td> </tr> <tr> <td>小红</td> <td>化学</td> <td>100</td> </tr> <tr> <td>小红</td> <td>美术</td> <td>100</td> </tr> </tbody> </table> </body> </html>这个方法好像只能合并一列的所有行,如果你知道怎么合并多列的行,那么请留言,本人感谢不尽!
相关文章推荐
- 利用jquery-latest.js实现合并table多列重复行
- 利用原生js和jQuery实现单选框的勾选和取消操作
- 利用jQuery和JS实现奇偶行背景颜色自定义效果
- 利用js、jQuery和css实现环形进度条组件封装
- 利用原生js和jQuery实现单选框的勾选和取消操作的方法
- [HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
- 利用jQuery的ResourceLoader插件实现JS和CSS脚本的动态按需加载
- 利用jquery实现合并多列重复行
- 利用snowfall.jquery.js实现爱心满屏飞
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- [JS&Jquery]实现页面表格中相同内容的行或列合并
- 利用snowfall.jquery.js实现爱心满屏飞或点点满屏飞
- 【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码
- 利用JQuery和JS实现奇偶行背景颜色自定义效果
- 利用jquery.touchSwipe.js实现的移动滑屏效果。
- 利用jquery.form.js的ajaxSubmit实现不跳转提交表单数据
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- 利用Video.js与jquery.danmu.js实现一个弹幕播放器
- ddpowerzoomer.js利用jQuery扩展,实现对图片局部放大功能(源码分析)
- 利用jQuery的deferred对象实现异步按顺序加载JS文件