基于jQuery的jsp表格动态合并

代码展示

 <tr>
     <th style="text-align: center" >申报编号</th>
      <th style="text-align: center">使用单位</th>
      <c:if test="${sbzl ne '3002'}">
          <th style="text-align: center">设备注册代码</th>
      </c:if>
      <c:if test="${sbzl eq '3002'}">
          <th style="text-align: center">特种设备编号</th>
      </c:if>
      <th style="text-align: center">设备种类</th>
      <th style="text-align: center">检验类型</th>
      <th style="text-align: center">检验内容</th>
      <c:if test="${sbzl eq '5000'}">
          <th>车牌号</th>
          <th>燃油种类</th>
      </c:if>
      <c:if test="${jyxz eq '1'}">
          <c:if test="${sbzl ne '5000'}">
              <th style="text-align: center">检验日期</th>
          </c:if>
      </c:if>
      <c:if test="${sessionScope.ishb eq '1'}">
          <th>操作</th>
      </c:if>
</tr>

<c:forEach items="${jynrlblist}" varStatus="jynr" var="ggWssbJynrlb" >
 <tr align="center">
   <td class="sbbhHebing">
     <input type="hidden" id="wssbid_${jynr.count}" value="${ggWssbJynrlb.wssbid}"/>
      <input id="declareNum_${jynr.count}" value="${ggWssbJynrlb.sbbh}"/>
      <input type="hidden" name="sbzl" id="sbzl${jynr.count}" value="${ggWssbJynrlb.sbzl}"/>
   </td>
   <td>
      ${ggWssbJynrlb.sydwmc}
   </td>
	<c:if test="${sessionScope.ishb eq '1'}">
	   <td colspan="5" class="hebing">
	   <input id="btnSubmitbz" onclick="addDeviceWindwo('${ggWssbJynrlb.wssbid}');" value="录入备注"/>
	   </td>
	</c:if>
 </tr>
</c:forEach>

js处理

<script>
 $(function(){
   $(".hebing").each(function(index, element) {
     if(!$(this).hasClass('hide')){
       var next=$(this).parent('tr').next('tr').children(".hebing") // 
       var last=$(this).parent('tr').children(".sbbhHebing")  //本行的第一个框里面的值
       var nextlast=$(this).parent('tr').next('tr').children(".sbbhHebing")//下一行第一个框里面的值
        $(this).attr("rowspan",1);  //初始值
        while(last.text()==nextlast.text()){
          $(this).attr("rowspan",parseInt($(this).attr("rowspan"))+1); // 合并框
          next.hide();
          next.addClass('hide');
          next=next.parent('tr').next('tr').children(".hebing");
          last=last.parent('tr').children(".sbbhHebing")
          nextlast=nextlast.parent('tr').next('tr').children(".sbbhHebing")
       }
     }
  })
});
</script>

效果