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

这里写图片描述

//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;
			}
		}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

终极之旅

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

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

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

打赏作者

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

抵扣说明:

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

余额充值