依据第一列,内容相同的,最后一列的表格合并

本文介绍了一种使用HTML和JavaScript实现的表格数据处理方法,通过设定特定属性来合并重复的产品名称对应的行,同时展示了如何利用JavaScript进行DOM操作,实现动态的数据合并及显示优化。

这里写图片描述

//html部分篇幅有点赘余,可只看标出的重要一行!!
<table class="table mt-5 table-border table-bordered table-bg">
						<thead>
							<tr class="text-c">
								<th rowspan="2" class="text-l" width="150">产品名称/生产厂家</th>
								<th rowspan="2" width="120">规格/型号</th>
								<th rowspan="2" width="100">采购数量/已收货</th>
								<th rowspan="2" width="100">单价/单位</th>
								<th rowspan="2" width="80">买方评价得分</th>
							</tr>
							
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${not empty proList}">
									<c:set var="id" value="0" />
									<c:forEach items="${proList}" var="var" varStatus="stauts">
										<tr class="text-c" name="tr">
											<c:set var="id" value="${id+1}" />
											<td rowspan="1">${id}</td>
											<td class="text-l" rowspan="1">
												<div class="f-13" name="proName">${var.proName}</div>
												<div class="f-12 c-999">${var.manuFactory}</div>
												<div class="f-12 c-999 clearfix">
													<div id="star-${id}" class="star-bar size-M f-l mr-10 va-m">
													<input type="hidden" id="${id}-star" name="starScore" value="${var.evaTion}">
													</div>
												</div>
											</td>
											
											<td class="text-l" rowspan="1">
												<div class="f-13">规格:${var.proSpec }</div>
												<div class="f-12 c-999">型号:${var.proModel }</div>
											</td>
											<td class="text-c" rowspan="1">${var.disNum }/${var.disNum }</td>
											<td rowspan="1">${var.proUnitPrice}元/${var.proUnit}</td>
											<c:forEach items="${countPJ}" var="countPJ" varStatus="status">
											<c:if test="${var. proName==countPJ.productName and var.manuFactory==countPJ.manufacturer}" >
											
										//主要的一行-->	<td name="hosScore" class="${countPJ.productName}" id="${var.proId }" rowspan="${countPJ.rowCount}">${countPJ.scoreAvg+mianMsgPd.evaSend+mianMsgPd.evaService}</td>
											
											
											<c:if test="${mianMsgPd.evaType == 0}">
												<td>未评价</td>
											</c:if>
											<c:if test="${mianMsgPd.evaType == 1}">
											
											<td name="orderzzz" class="${countPJ.productName}" id="zp${var.proId }" rowspan="${countPJ.rowCount}"><input name="orderIdScore" value="" disabled style="border:none;width:30px;" >
											</td>
											
											</c:if>
										</tr>
									</c:forEach>
									<input type="hidden"  id="count" value="${fn:length(proList)}">
								</c:when>
							</c:choose>
						</tbody>
					</table>

要合并的td标签中设定name值,id,和class的值。name值为固定值,方便在js中取到最后一列的td标签。id设为产品的id,这样在循环获取数据时不会重复命名id。class的值为产品名,也就是第一列的内容,这样用来比较产品名相同的列合并,并赋值rowspan,值为后台的相同数据的条数。
合并几行,就是把rowspan设为几,并把相同的其他行删掉。

js代码如下

var scoretd=document.getElementsByName("hosScore");//获取最后一列的td标签
	var arraysss=new Array();
	for(i=0;i<scoretd.length;i++){//这里保存到数组中,因为删除一行后,scoretd会随时改变,不易操作。所以把id保存到数组中,删除的时候,直接找到id的td标签,删除。
		arraysss[i]=$(scoretd[i]).attr("id");
	}
	var classNamea="";
	for(i=0;i<arraysss.length;i++){
		classNamea=$("#"+arraysss[i]).attr("class");
		var array=new Array();
		 for(j=i+1;j<arraysss.length;j++){
			if(classNamea==$("#"+arraysss[j]).attr("class")){
				$("#"+arraysss[j]).remove();
			}else{
				 i=j-1;
				break;
			}
		}
	}
在Word VBA中合并表格第一列相同值通常意味着你需要创建一个脚本,按照特定条件将具有相同第一列数据的行合并到一起。这个过程可以分为以下几个步骤: 1. **获取选区或范围**:首先,确定你要操作的表格范围,可以选择整个表格,也可以指定具体的单元格。 2. **遍历第一列**:通过For Each循环遍历第一列的所有单元格,比较它们的内容。 3. **判断是否相等**:对于每个单元格,检查其内容是否与一个单元格的内容相同。 4. **合并行**:如果找到相同的值,检查该行下方的行是否有不同的值。如果没有,则可以将下面的行合并到当行,删除多余的行;如果有不同,跳过继续处理。 5. **更新数据**:合并行后,需要更新调整后的数据,如合并后的单元格位置、总和或其他计算结果。 6. **清理工作**:最后记得关闭可能打开的工作簿表视图的滚动条,并清除临时变量和错误处理。 以下是一个简单的VBA示例代码片段,用于演示合并功能,注意这只是一个基础版本,实际应用中可能需要更复杂的逻辑来处理特殊情况: ```vba Sub MergeTableBasedOnFirstColumn() Dim tbl As ListObject ' 表格对象 Dim rng As Range ' 当遍历范围 Dim cell As Range Dim lastRow As Long ' 获取选定的表格 Set tbl = ActiveDocument.Tables(1) ' 更改这里的数字以选择正确的表格 ' 初始化变量 lastRow = tbl.Range.Rows.Count - 1 Set rng = tbl.ListRows(1).Range ' 遍历第一列 For Each cell In rng.Columns(1) If cell.Value <> rng.PreviousCell.Value Then ' 如果值不同 ' 检查下面一行是否有不同 If cell.Offset(-1, 0).Value <> cell.Value Then ' 合并行 cell.EntireRow.InsertAbove ' 将下一行插入当行上方 cell.Resize(2, 1).Merge ' 调整并合并两行 End If End If Set rng = cell.Offset(1, 0) ' 移动到下一个单元格 Next cell ' 清理工作 tbl.Range.Font.Underline = False ' 取消下划线或其他样式设置 End Sub ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

终极之旅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值