Jquery 表格合并的问题分享 - Web前端
作者：98wpeu发布时间：2026-07-02分类：网页前端技术浏览：2
导读：这里我使用JQuery库，这个就不用过多介绍了，有几个知识点： -选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始 -tem...
这里我使用JQuery库，这个就不用过多介绍了，有几个知识点：
- 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始
- temPRow.parent()，表示返回tempRow对象的父节点对象
- $("<td/>").prependTo()，表示将一个td元素添加到指定元素的内容头部
实例代码
index.html
复制代码 代码如下:
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<head>
<metaHTTP-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代码的效果图
- 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始
- temPRow.parent()，表示返回tempRow对象的父节点对象
- $("<td/>").prependTo()，表示将一个td元素添加到指定元素的内容头部
实例代码
index.html
复制代码 代码如下:
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<head>
<metaHTTP-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插件和discuz插件，Python和PyQt的相关文章都未来得及整理发布，唉，时间不够用啊，只能慢慢来了。JQuery是相当不错的说，内置Sizzle选择器后，那速度更是飞一般，貌似现在到1.6版本了，希望越做越好吧！
相关推荐
- jquery ajax return没有返回值的解决方法 - Web前端
- Jquery Change与bind事件代码 - Web前端
- jquery 查找iframe父级页面元素的实现代码 - Web前端
- 精心收集的jQuery常用的插件1000 - Web前端
- 精心收集的jQuery常用的插件1000 - Web前端
- 读jQuery之三（构建选择器） - Web前端
- jquery ajax修改全局变量示例代码 - Web前端
- JQuery入门——事件切换之hover()方法应用介绍 - Web前端
- 关于jQuery中的end()使用方法 - Web前端
- jQuery实现的Email中的收件人效果（按del键删除） - Web前端
- 网页前端技术排行
-
- 1【第六章】Foundation之按钮和下拉功能 - Web前端
- 2jQuery编写widget的一些技巧分享 - Web前端
- 3在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 6jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 9JS网页制作实例:标签云 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性