<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<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 bgcolor="#fff000"><font color="red">夜班</font></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>
分享到：
相关推荐
可以创建一个辅助函数，遍历数据并记录具有相同值的行索引。 ```javascript function mergeCells(data) { var merges = []; // 存储需要合并的单元格信息 // 对每一列进行比较 for (var colIndex = 0; ...
在本示例中，我们将通过jQuery实现合并表格中相同行的单元格操作。这种方法不仅能够帮助开发者减少重复的代码编写，还能快速实现动态数据展示的界面优化。通过具体实例的分析，我们将深入探讨其相关的操作技巧。 ...
在这个案例中，jQuery被用来增强表格的用户体验，特别是鼠标悬停和行选择的样式变化。 首先，让我们了解一下如何使用jQuery创建一像素表格的基础结构。通常，我们会创建一个`<table>`元素，并为其设置非常窄的...
综上所述，使用jQuery合并表格单元格的关键在于通过遍历表格行和比较相邻单元格内容来决定是否合并单元格。利用jQuery提供的.hide()方法来隐藏需要合并的单元格，同时运用attr()方法设置rowspan或colspan属性来完成...
每次遍历时都会更新计数器 `count`，用于记录合并单元格所占据的行数。 ```javascript count++; ``` #### 三、JSP 示例代码解析 在 JSP 文件中，使用 `<s:iterator>` 标签来迭代列表，并为每个元素生成一个表格行...
跨行合并是指在表格中，为了表达数据的层级关系或者逻辑分组，将具有相同分类属性的连续行合并为一个单元格显示。例如，当表格展示了某省的市和区信息时，我们可以将同一市下的所有区的信息合并显示在一个单元格内，...
1. 首先，获取表格的行数（rowCount），并初始化一个标志变量（flagRow）用于记录是否需要合并行。 2. 使用循环遍历表格的每一行。在每一轮迭代中，我们需要比较当前行与前一行的某些列（比如课别和班别）的值是否...
总结来说，jQuery Grid控件是一个功能丰富的数据管理工具，它在ASP.NET环境中表现出色，提供了一套全面的数据操作接口，使得开发高效、互动性强的数据展示页面变得简单易行。通过深入理解和熟练使用这个控件，开发者...
6. **编辑和添加数据**：熟悉如何在网格内编辑现有记录，以及添加新记录。 7. **自定义行为**：探索如何扩展jqGrid的功能，实现独特的用户交互和界面效果。 8. **性能优化**：理解如何利用组合脚本、延迟加载和缓存...
在实际应用中，Datagrid 还有很多高级功能，如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等，可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用，可以大大提高开发效率，为用户提供更加友好的...
"仿Excel合并单元格实例点击合并表格单元格特效代码"是一个典型的案例，它涉及到前端UI设计和JavaScript编程技术，用于实现类似Excel的表格数据处理功能。下面我们将深入探讨这个主题。 首先，我们要理解Excel中的...
2. **提取行数据**：遍历表格中的每一行，提取关键信息如`trid`用于判断是否需要合并单元格。 3. **设置合并属性**：如果当前行与前一行的`trid`相同，则移除当前行的第一个`td`；否则，设置前一行的第一个`td`的`...
例如，通过设置`border-collapse`属性可以合并单元格边框，`text-align`调整文本对齐，`background-color`改变背景色，以及使用`nth-child`选择器为行或列添加交替颜色。 2. JavaScript（JS）：JavaScript是网页...
3. **组件应用**：jQuery EasyUI提供了诸如对话框（dialog）、表格（datagrid）、菜单（menu）、表单（form）等组件。实例中可能会展示如何在ASP.NET页面中创建和配置这些组件。 4. **事件处理**：jQuery EasyUI...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如对话框、表格、菜单、下拉框等，极大地简化了网页的开发工作。在这个“jQuery EasyUI 增删改查、排序”的主题中，我们将深入探讨如何...
jQuery EasyUI 的 DataGrid 是一个强大的数据展示组件，它基于 jQuery 和 EasyUI 框架构建，用于在网页上创建可交互、可排序、可分页的数据表格。DataGrid 继承了 $.fn.panel.defaults，并且通过 $.fn.datagrid....
在IT行业中，jQuery EasyUI是一个基于jQuery的前端框架，它提供了丰富的UI组件，如对话框、表格、分页等，帮助开发者快速构建用户界面。在本案例中，我们关注的是"jquery easyui pagination 分页插件扩展"，这是一个...
- **DataGrid中合并单元格**：合并单元格功能可以在DataGrid中合并相邻的单元格，以达到更美观的布局效果。 #### 7. 窗口 - **我的第一个窗口**：这部分展示了如何创建一个简单的弹出窗口。 - **自定义窗口工具**：...