今天一大早就看到一个朋友向我求助，如何实现那样一种显示方式，我看了一下，觉得这不全是技术上的问题，而是思路的问题，给他做了个Demo，也留给自己以后有这样的需求的时候方便查阅吧。
他的问题是这样的：
我的实现方式是：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>表格一对多</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<%
//模拟数据
List<Map<String,List>> rs = new ArrayList<Map<String,List>>();
List mc = new ArrayList();
mc.add("名称1");
mc.add("名称2");
mc.add("名称3");
List mc2 = new ArrayList();
mc2.add("名称1");
mc2.add("名称2");
Map m = new HashMap();
m.put("北京",mc);
m.put("上海",mc2);
rs.add(m);
for(Map<String,List> map:rs){
Set<Map.Entry<String, List>> set = map.entrySet();
for (Iterator<Map.Entry<String, List>> it = set.iterator(); it.hasNext();) {
Map.Entry<String, List> entry = (Map.Entry<String, List>) it.next();
System.out.println(entry.getKey() + "--->" + entry.getValue());
List vlist = (List)entry.getValue();
%>
<tr>
<td rowspan="<%=vlist.size()+1%>"><%=entry.getKey()%></td>
</tr>
<% for(int i=0;i<vlist.size();i++){ %>
<tr>
<td><%=vlist.get(i)%></td>
</tr>
<%}%>
<%
}
} %>
</table>
</body>
</html>
最后给他实现的效果是：
分享到：
相关推荐
排序使用户可以根据一列或多列的值对表格进行升序或降序排列。在Bootstrap动态表格中，通常通过点击表头实现排序，每个表头元素上添加一个事件监听器，监听用户的点击行为。然后，使用JavaScript或jQuery对数据进行...
在Android开发中，动态添加表格行是一个常见的需求，特别是在创建数据展示或者用户输入表单时。这个场景通常涉及到`TableLayout`布局，它是Android提供的一个用于构建网格样式的视图容器。下面我们将深入探讨如何在...
2. **初始化表格**：接着，对表格元素应用`DataTable()`方法，设置分页相关的参数，如每页显示的记录数、分页样式等。 ```html $(document).ready(function() { $('#example').DataTable({ "pageLength": 10, //...
动态表格的一个优点是易于扩展，可以轻松添加新的列或行，或者调整现有单元格的布局和样式，以适应业务需求的变化。 10. **示例代码** 下面是一个简单的代码示例，展示如何创建一个两列的表格： ```csharp ...
本篇文章将详细介绍如何在layui表格中实现操作列按钮的动态显示。 1. **layui表格操作列的定义** layui表格允许开发者通过`<script type="text/html">`标签来定义操作列的模板。在这个模板中，我们可以使用`{{# }}...
"多表格固定列，实现动态增删改"这个主题涉及到的是如何使用前端技术来实现对表格数据的高效操作，特别是固定列、动态添加、删除和修改功能。下面我们将深入探讨这一话题。 首先，固定列在网页表格中非常实用，因为...
综上所述，动态表格布局源码是一个复杂但实用的工程，涵盖了前端开发的多个方面，包括HTML结构、CSS样式、JavaScript交互以及性能和兼容性的优化。理解和实现这样的源码对于提升前端开发技能非常有益。
动态表格是ExtJS中的一个重要组件，它允许用户以灵活的方式展示和操作数据。在这个“ExtJS 动态表格完整版”中，我们可以期待学习到关于如何创建、配置和定制动态表格的深入知识。 首先，动态表格的核心组件是`Ext....
综上所述，"js-表格显示特效"涵盖了JavaScript编程、DOM操作、CSS样式设计以及可能的第三方库应用等多个方面，需要开发者具备全面的前端技术能力。通过对这些知识点的深入理解和实践，可以打造出富有吸引力且功能...
"jiaoben4920"可能是一个示例脚本或CSS样式文件，配合HTML表格一同展示效果。 总的来说，这个压缩包提供了实现动态表格排序的jQuery代码示例，对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些...
- 在循环遍历读取的数据时，对每一行数据进行处理，将其转换为HTML表格格式。 - 使用 **if** 语句判断数据是否为空，为空则显示空字符串。 #### 三、具体实现过程 1. **连接数据库**： - 首先，通过 `...
综上所述，创建一个可滚动、可排序的Android表格涉及到多个技术层面，包括RecyclerView的使用、自定义Adapter和布局管理器、数据处理和排序算法、触摸事件处理以及性能优化等。通过实践和理解这些知识点，开发者能够...
综上所述，动态操作表格并进行列渲染是一项涉及前端框架、数据处理、用户体验和性能优化的综合性技术。通过学习和实践这些知识点，开发者能够创建出更灵活、更具交互性的数据展示界面，提升用户在大数据环境下的操作...
以下是对"js 动态表格 增 删 查 改"这一主题的详细讲解。 一、动态表格的创建 动态表格的基础是HTML `<table>` 标签，但真正的动态性来自于JavaScript。使用JavaScript，我们可以动态地生成和更新表格行 (`<tr>`)、...
要实现行内嵌套子表格，我们需要创建自定义的GridItemRenderer，这是一个可以自定义单元格或行显示方式的类。 1. **自定义GridItemRenderer**： 创建一个继承自AdvancedDataGridItemRenderer的类，这个类将作为子...
在ASP.NET中，动态删除表格记录的数据显示是一个常见的需求，特别是在构建数据驱动的Web应用程序时。这个过程涉及到前端用户界面的交互以及后端数据库的管理。以下是对这一知识点的详细阐述： 1. **HTML和ASP.NET...
以上就是关于“IE创建动态表格注意事项”的关键知识点，涵盖了浏览器兼容性、JavaScript库、DOM操作、事件处理、CSS样式等多个方面。在实际开发中，理解并解决这些问题对于创建在所有浏览器中都能良好运行的动态表格...
`HuidaGrid.js` 文件很可能是这个分页类的核心代码，它可能包含了一个或多个用于处理表格、分页和查询的函数。这些函数可能包括初始化表格、计算每一页显示的数据量、根据用户选择的页码切换显示的数据、以及处理...