Jquery 表格合并的问题分享
这里我使用Jquery库，这个就不用过多介绍了，有几个知识点：
- 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始
- tempRow.parent()，表示返回tempRow对象的父节点对象
- $("<td/>").prependTo()，表示将一个td元素添加到指定元素的内容头部
实例代码
index.html
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" language="javascript" ></script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#gridview, #gridview td { border:1px #ccc solid; border-collapse:collapse; }
-->
</style>
</head>
<body>
<table id="gridview" width="386" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="59" align="center"><strong>课别</strong></td>
<td width="76" align="center"><strong>班别</strong></td>
<td width="73" align="center"><strong>班次</strong></td>
<td width="130" align="center"><strong>出勤时间</strong></td>
</tr>
<tr>
<td>陈伟勋</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>一班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>两班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>两班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>两班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>三班制</td>
<td>早班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陈伟勋</td>
<td>三班制</td>
<td>晚班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>两班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>两班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>两班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>三班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>张文军</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
</table>
<script>
var grid = $("#gridview");
var rowCount = grid.find("tr").length - 1;
var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html();
var sp = 0;
for(var i = rowCount; i >=0; i--) {
var tempRow = grid.find("tr:eq("+i+")");
if(flagRow == tempRow.find("td:eq(0)").html()) {
tempRow.find("td:eq(0)").remove();
}
else {
$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")"));
flagRow = tempRow.find("td:eq(0)").html();
sp = rowCount-i;
if(i != 0) {
tempRow.find("td:eq(0)").remove();
}
}
}
</script>
</body>
</html>
注释掉Jquery代码的效果图
运行Jquery代码的效果图
小结
代码写得很粗糙，只是简单做个笔记，最近在忙着整理编写一些Jquery插件和discuz插件，Python和PyQt的相关文章都未来得及整理发布，唉，时间不够用啊，只能慢慢来了。Jquery是相当不错的说，内置Sizzle选择器后，那速度更是飞一般，貌似现在到1.6版本了，希望越做越好吧！
相关推荐
-
JQuery实现表格中相同单元格合并示例代码
代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this
-
jquery miniui 教程 表格控件 合并单元格应用
表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3
-
jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>
-
基于jQuery的合并表格中相同文本的相邻单元格的代码
ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 深圳 00028 红花油 广东 广州 00027 白花油 广东 广州 00028 红花油 广东 深圳 00028 红花油 广东
-
Jquery 表格合并的问题分享
这里我使用Jquery库,这个就不用过多介绍了,有几个知识点: - 选择器tr:eq(index),表示选择指定index索引的tr元素,index索引从0开始 - tempRow.parent(),表示返回tempRow对象的父节点对象 - $("<td/>").prependTo(),表示将一个td元素添加到指定元素的内容头部 实例代码 index.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/x
-
jQuery表格(Table)基本操作实例分析
本文实例讲述了jQuery表格(Table)基本操作.分享给大家供大家参考,具体如下: Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: collapse; border-spacing: 0; margin-right: auto; margin-left: auto; width: 800px; } th, td { border: 1px
-
jQuery实现合并表格单元格中相同行操作示例
本文实例讲述了jQuery实现合并表格单元格中相同行操作.分享给大家供大家参考,具体如下: 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 }) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.f
-
Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
-
jQuery实现合并/追加数组并去除重复项的方法 原创
本文实例讲述了jQuery实现合并/追加数组并去除重复项的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net jQuery不重复地追
-
jquery 动态合并单元格的实现方法
如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab
-
vue实现表格合并功能
本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1.背景 本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并. 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有 数据驱动的框架都有效,比如说Angular和React.最后的实现效果是这样的: 2.思路 原本的正常表格是这样的: <table > <thead&
-
vue.js实现表格合并示例代码
前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td
-
基于jQuery实现交互体验社会化分享代码附源码下载
先给大家展示下效果图,看看是不是亲想要的效果,如果满足您的要求请继续往下阅读. 效果展示 源码下载 基于jQuery交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&
-
JQuery 表格操作(交替显示、拖动表格行、选择行等)
JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!-- $(function(){ //交替显示行 $('#alternation').click(function(){ $('tbody > tr:odd', $('#example')).toggleClass('alternatio