依据第一列,内容相同的,最后一列的表格合并
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; } } }
相关文章推荐
- table表格合并第一列中相同的内容!
- 合并表格中同一列中相同的内容
- [置顶] table表格合并第一列中相同的内容!
- Javascript合并表格中具有相同内容的单元格
- jquery合并单元格(表格相邻列内容相同合并)
- [JS&Jquery]实现页面表格中相同内容的行或列合并
- 使用jQuery实现页面表格中相同内容的行或列合并[转载]
- Repeater 合并一列中内容相同的单元格
- 根据第一列条件合并表格中后面相同的列
- Javascript合并表格中具有相同内容单元格示例
- Javascript合并表格中具有相同内容单元格示例
- Javascript合并表格中具有相同内容单元格示例
- 使用jQuery实现页面表格中相同内容的行或列合并
- Javascript合并表格相同内容单元格示例
- sql中怎样把同一张表中相同字段的内容合并为一条记录(不同字段的那一列每个记录后面加逗号)
- 导出的excel同一列相同内容的合并
- SQL 同一张表中相同字段的内容合并为一条记录(不同字段的那一列每个记录后面加逗号)
- 如何在WPS表格中同一列或同一行插入相同内容
- Jquery 合并表格单元内容相同的单元
- 编写html表格输出的时候有时候会出现同一列连续出现两行或者是三行的数据内容一样,并且我们想将这些行合并起来,这个时候我们就需要以下这些代码