Bootstrap-表格合并单元格

最新推荐文章于 2024-09-28 17:19:16 发布
最新推荐文章于 2024-09-28 17:19:16 发布
阅读量243 收藏
点赞数
文章标签： javascript ViewUI
本文通过具体的HTML代码展示了如何使用Bootstrap框架设计并实现带有合并单元格功能的表格。示例中包含了输入框、下拉菜单及多个表格实例，详细说明了不同场景下单元格合并的具体实现方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、问题背景

利用Bootstrap设计表格，并且表格需要合并单元格


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta name="description" content="">
	    <meta name="author" content="">
	    <link rel="icon" href="js/bootstrap-3.3.5/docs/favicon.ico">
		<title>Bootstrap-表格合并单元格</title>
		<link rel="stylesheet" href="js/bootstrap-3.3.5/dist/css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 98%;
				font-family: "微软雅黑";
				font-size: 14px;
			}
			table{
				width: 100%;
			}
		</style>
		<script>
			
		</script>
	</head>
	<body>
		<div class="row">
			<div class="col-xs-12">
				<table class="table table-striped">
					<tr>
						<td>
							<label for="stuNo">学号：</label>
							<input type="text" id="stuNo" />
							<div class="btn-group" style="width: 157px; height: 26px;">
							   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 157px; height: 26px;">
							      	班级 
							   </button>
							   <ul class="dropdown-menu" role="menu">
							      <li><a href="#">一班</a></li>
							      <li><a href="#">二班</a></li>
							      <li><a href="#">三班</a></li>
							      <li><a href="#">四班</a></li>
							      <li><a href="#">五班</a></li>
							   </ul>
							</div>
							<button type="button" class="btn btn-primary">查询</button>
							<button type="button" class="btn">重置</button>
						</td>
					</tr>
				</table>
			</div>
			<div class="col-xs-12">
				<div class="col-xs-2">
					<table class="table table-striped table-bordered">
						<caption>学生表</caption>
						<thead>
							<tr>
								<th>学生</th>
								<th>学号</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>胡思</td>
								<td>2016010101</td>
							</tr>
							<tr>
								<td>赵四</td>
								<td>2016010102</td>
							</tr>
							<tr>
								<td>陈诚</td>
								<td>2016010103</td>
							</tr>
							<tr>
								<td>李磊</td>
								<td>2016010104</td>
							</tr>
							<tr>
								<td>孙杨</td>
								<td>2016010105</td>
							</tr>
							<tr>
								<td>李爽</td>
								<td>2016010106</td>
							</tr> 
						</tbody>
					</table>
					<table class="table table-striped table-bordered">
						<caption>学生表</caption>
						<thead>
							<tr>
								<th>学生</th>
								<th>学号</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>胡思</td>
								<td>2016010101</td>
							</tr>
							<tr>
								<td>赵四</td>
								<td>2016010102</td>
							</tr>
							<tr>
								<td>陈诚</td>
								<td>2016010103</td>
							</tr>
							<tr>
								<td>李磊</td>
								<td>2016010104</td>
							</tr>
							<tr>
								<td>游豪</td>
								<td>2016010105</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="col-xs-10">
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
					<table class="table table-striped">
						<tr style="text-align: center;">
							<td>到校</td>
							<td>回家</td>
							<td>距离</td>
						</tr>
						<tr style="text-align: center;">
							<td colspan="2" style="text-align: center;">222</td>
							<td rowspan="2" style="width: 200px;">
								<div class="col-xs-12">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>姓名</th>
												<th>学号</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>胡思</td>
												<td>2016010101</td>
											</tr>
										</tbody>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;">333</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

3、实现结果


iteye_8264
关注
bootstrap合并单元格
weixin_45525043的博客
12-04 778
bootstrap合并单元格 新手，也是从大佬那里借鉴得。直接上图看效果。 这是单元格合并得效果。 代码： /** 合并单元格 @param data 原始数据（在服务端完成排序） @param fieldName 合并属性名称 @param colspan 合并列 @param target 目标表格对象 */ function mergeCells(data,fieldName,colspan,target) { //声明一个map计算相同属性值在data对象出现的次...
bootstrap表格列合并
10-17
bootstrap表格列合并，将要合并的单元格每四列进行合并！
bootstrap-table 合并单元格
最新发布
qq_33275928的博客
09-28 1129
if (value!= lock) { // 上一个值与当前值不一致时需要重新设置key。* @param {*} condition 根据哪个条件进行合并，可忽略，默认使用fieldName值。* @param {*} fieldName 需要合并的字段名同表格配置的field值。//声明一个map计算相同属性值在data对象出现的次数和。* @param {*} colspan 合并多少列。* @param {*} target 表格实例。* @param {*} data 表格数据。
Bootstrap 合并单元格
热门推荐
Ghjkku的博客
03-06 13万+
合并效果图 Bootstrap其他请求的属性我们就不写了 和平常的一样 重点是columns var columns = [ [ { field : 'merchantId', title : '商户ID', align : 'center', colspan : 1, rowspan : 2 }, { ...
bootstrap-table导出合并单元格
08-31
使用bootstrap-table客户端分页生成表格，导出表格按照单元格内容相同合并单元格
bootstrap table实现合并单元格效果
10-17
总结起来，Bootstrap Table 提供的 `mergeCells` 方法为开发者提供了一种方便的方式来合并表格单元格，以适应各种数据展示需求。通过理解和运用这一功能，你可以创建更符合业务需求和用户体验的表格展示。
bootstrap-table组合表头的实现方法
08-29
Bootstrap-Table 是一个功能强大且灵活的表格插件，它提供了多种方式来实现复杂的表格需求。其中，组合表头是 Bootstrap-Table 中一个非常有用的功能，本文将详细介绍如何使用 Bootstrap-Table 实现组合表头。 ...
Bootstrap实现的表格合并单元格示例
11-29
本文实例讲述了Bootstrap实现的表格合并单元格。分享给大家供大家参考，具体如下： 1、问题背景 利用Bootstrap设计表格，并且表格需要合并单元格 2、实现源码 <!DOCTYPE html> <html> <head> <...
【bootstrap-table】在bootstrap-table的表格中合并单元格：含有父类的合并单元格，父类不同时子类相同也不合并
lixiang_0531的博客
01-20 1577
今天遇到一个需求，简单来说就是合并单元格，但我实现时发现，要求其合并时，在国家相同的字段内才允许合并，遇见更复杂的需求，需要的父类可能为多个，所有我就在之前简单的合并单元格的方法基础上进行了部分修改。然后在表格设置中调用，方法如下。
bootstrap table合并单元格mergeCell
jaja_zz的博客
11-29 8489
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); var num = 1; for (var i = 0; i < data.length - 1; i++) { for ( var p...
bootstrap-table-单元格动态合并(直接用就行)
BlackjunPJH的博客
06-08 2204
最近在开发项目的同时,出现的RuoYi 框架,需求是动态单元格合成,但是RuoYi虽然是基于bootstrap的,但是没有提供单元格合并的方法.
bootstrap table实现合并单元格效果(亲测有效)
bingmoujs的博客
05-11 1660
在bootstrapTable加载成功执行，如。
bootstrap 合并单元格
我是一只胖子丶的博客
04-24 5993
合并单元格有多种实现方式 ，本文主采用的是 在数据层合并，然后在展示层（bootstrap）实现合并 原理是根据有规律的排序数据然后在展示层根据数据行数 合并，这样的劣势是 数据一定要有规律 对于那些简单的需求的话 倒是可以用这种 有需要的朋友可以看我另一篇文章 >>> bootstrap 合并单元格之mergeCells属性合并 还有一种是比较灵活的 是事先...
bootstrap table 合并单元格
u014034656的博客
05-16 1562
/* *合并列相同的单元格，以第一列分组 *tableId 表格id *colList 要合并的列,以,分隔 例如 "modelId,modelIsp,modelProvinceid" */ var mergeCellsByField = function (tableID, colList) { var cols = colList.split(","); var tab
杂技随笔：BootstrapTable 合并单元格
Mr_chen的博客
06-11 1171
杂技随笔：BootstrapTable 合并单元格 前言 今天博主将为大家分享:杂技随笔：BootstrapTable 合并单元格，不喜勿喷，如有异议欢迎讨论！ 开始 在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此记录下来以便以后回看 JavaScript代码 /** * 合并单元格 * @param data 原始数据（在服务端完成排序） * @param ...
bootstrap table 数据合并单元格
那一年的博客
04-12 1442
原文地址:http://sigechuizi.cn/article/112
Bootstrap-table合并单元格功能在Excel导出中的应用
在使用 bootstrap-table 导出数据到 Excel 文件时，可能会遇到需要按照某些规则合并单元格的情况，以保持数据的清晰度和一致性。这里我们将详细探讨如何在使用 bootstrap-table 导出数据时实现合并单元格的功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值