thymeleaf html中后台循环list集合数据 js动态合并单元格的做法

在开发过程中 我们从后台获取数据绑定list集合 但是我们需要实现跨行跨列 的表格。

难点：

属性拼接 th:class=" 'type_' +${var.getOrderType()}"使用‘+’；

获取属性值  td[class^='type_']

错误想法：

我们第一个反应就是在td标签中rowspan。这个做法是错误的 他会导致数据错位，因为你每次都会循环同样一个<td rowspan='3'>

你就会把位置占用  导致成为一个直角梯形的样子

正确的做法是：

1、不在html页面中写 <td rowspan='3'>。设置一个class即可。<td class='type_'+'#{item.getType()}'>

2、引入js。获取class对象的td的值  通过循环判断两个值是否相等  如果相等，就使用修改（attr）这个属性，将class修改成rowspan  并判断这个相等的值的个数 作为rowspan的value。在前面最好做一个判断value>1,可以提高效率