关闭

table合并单元格(Jquery 插件

1578人阅读 评论(0) 收藏 举报
分类:
<!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>table合并单元格(Jquery 插件)</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
	table{ border-collapse:collapse;}
	table th{ background:#ddd; }
	table td,table th{ padding:2px 10px;border:1px solid #999;}
</style>
</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>

<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;
				}
			});
			
		})
	}
}( window.jQuery );

$("#my-table").rowspan({td:1});

</script>
</body>
</html>

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

table合并单元格(Jquery 插件)

一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把table 中的重复项合并单元格。   实现代码参考如下: 首先要导入: ...
  • dyllove98
  • dyllove98
  • 2013-04-29 10:13
  • 8005

封装的一个JQuery插件 ,作用是实现动态单元格合并

function colsInit(tab){ //封装的一个JQuery插件 ,作用是实现动态单元格合并 jQuery.fn.rowspan = function(colIdx)...
  • nu11_
  • nu11_
  • 2016-12-06 11:28
  • 458

jquery.table.rowspan.js 表格自动合并单元格插件

日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。 1....
  • tongyiyi
  • tongyiyi
  • 2016-04-15 10:33
  • 7647

jquery.table.rowspan.js 表格自动合并单元格插件

  • 2016-04-15 10:38
  • 34KB
  • 下载

用最简的代码和例子演示如何使用jQuery进行单元格合并

前言这几天的项目再次应用到了表格中单元格合并的功能,之前的有个项目是只在某一列中进行合并操作,因此代码是遍历每行的某一列单元格,而这次的需求比较复杂,列数很多,都可以动态显示隐藏,原来的代码功能明显不...
  • lhtzbj12
  • lhtzbj12
  • 2017-01-16 21:31
  • 513

table合并单元格(Jquery 插件)

一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把table 中的重复项合并单元格。   实现代码参考如下: 首先要导入: ...
  • dyllove98
  • dyllove98
  • 2013-04-29 10:13
  • 8005

jquery.table.rowspan.js 表格自动合并单元格插件

日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。 1....
  • tongyiyi
  • tongyiyi
  • 2016-04-15 10:33
  • 7647

jquery 生成表格,拆分,合并

操作表格     html, body {height: 100%;} .gridtable {font-family: verdana,arial,sans-serif;font-size:...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2015-12-03 22:15
  • 860

html5中table表格标签中合并单元格

百度经验: 首先,我们打开DreamWeaver软件,新建一个html的页面,并以table命名进行保存。 然后我们在页面的body标签...
  • masterShaw
  • masterShaw
  • 2016-06-07 20:33
  • 4401

jQuery实现table单元格行合并

目标: 从这样一张表中,合并相同元素为一列 最终期待效果为: 可以看到同一列中相同的元素被合并,这是怎么做到的呢,第一个想法是从每列的第一行数据开始遍历该列,当发现后一行数据跟前一行数据相同时删...
  • viciousDear
  • viciousDear
  • 2015-05-30 20:54
  • 4373
    个人资料
    • 访问:9106962次
    • 积分:76162
    • 等级:
    • 排名:第24名
    • 原创:262篇
    • 转载:2813篇
    • 译文:3篇
    • 评论:788条
    文章分类
    最新评论