脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 表格合并

Jquery 表格合并的问题分享

 更新时间：2011年09月17日 19:46:11   作者：  
有朋友问GridView控件对于跨行合并的问题，这可以用控件嵌套来完成，当然，我更喜欢在前台来用JS来控制网页元素的样式，而后台仅仅是根据客户的请求，来返回数据。
这里我使用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选择器源码解读（七）：elementMatcher函数

    jQuery选择器源码解读（七）：elementMatcher函数

    这篇文章主要介绍了jQuery选择器源码解读（七）：elementMatcher函数,本文讲解了源码、功能、参数、返回函数 等内容,需要的朋友可以参考下
    2015-03-03
  • jquery实现加载更多

    jquery实现加载更多"转圈圈"效果(示例代码)

    这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • jQuery对象和DOM对象之间相互转换的方法介绍

    jQuery对象和DOM对象之间相互转换的方法介绍

    这篇文章主要介绍了jQuery对象和DOM对象之间相互转换的方法介绍,本文讲解了jQuery对象转成DOM对象、DOM对象转换成jQuery对象 方法,需要的朋友可以参考下
    2015-02-02
  • jQuery实现异步获取json数据的2种方式

    jQuery实现异步获取json数据的2种方式

    这篇文章主要介绍了jQuery实现异步获取json数据的2种方式,主要讲述了$.getJSON方法与$.ajax方法,非常实用,需要的朋友可以参考下
    2014-08-08
  • jquery+css实现Tab栏切换的代码实例

    jquery+css实现Tab栏切换的代码实例

    这篇文章主要介绍了jquery css实现Tab栏切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

    jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

    这篇文章主要介绍了jquery实现漫天雪花飞舞的圣诞祝福雪花效果，很浪漫，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • jQuery AJAX timeout 超时问题详解

    jQuery AJAX timeout 超时问题详解

    这篇文章主要介绍了jQuery AJAX timeout 超时问题详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 浅谈jquery高级方法描述与应用

    浅谈jquery高级方法描述与应用

    下面小编就为大家带来一篇浅谈jquery高级方法描述与应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    网易邮箱专题页的效果相信很多朋友都看过，也许有很多朋友想着把自己的网站做成那样动感美妙的全屏滚动效果，但苦于技术有限，只能望而生叹。此刻您有福了，这款基于jquery的fullpage就可以轻松的帮你实现动感美妙的全屏滚动效果，需要的可以参考下
    2015-09-09
  • jQuery实现购物车数字加减效果

    jQuery实现购物车数字加减效果

    本文给大家分享的是jQuery实现购物车数字加减效果的3种实现方法，分别是左右加减数字、Bootstrap风格，右侧加减以及jQuery ui风格，右侧加减，效果非常棒，需要的小伙伴来参考下吧。
    2015-03-03

最新评论