您的位置:首页 > 其它

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

2018-02-07 15:58 295 查看


//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;
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: