js动态合并单元格

 前几天做网页的时候涉及到动态合并单元格的问题，经过一番努力终于是做好了，所以现在把代          码贴出来。

首先说一下我们要实现的效果原图是这样的

然后我们要实现的效果是这样的

而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的，下面贴代

html代码如下

<thead>
<tr>
    <th>站点</th>
    <th>车道</th>
    <th>时间</th>
    <th>温度</th>
    <th>湿度</th>
    <th>通行量</th>
    <th>当前状态</th>
</tr>
</thead>
<tbody  id="tb">


</tbody>

然后呢我们进行数据获取和合并单元格的操作

首先呢数据结构是这样的

接下来就进行我们的动态添加表格和合并单元格的操作

function getlist() {
    $.ajax({
        //请求方式
        type: "Get",
        //请求的媒体类型
        //请求地址
        url: "http://localhost:81/data/all",
        //数据，json字符串
        //请求成功
        success: function (result) {
            for (var i=0;i<result.massage.length;i++){
                for (var j=0;j<result.massage[i].masterDates.length;j++){//这里是一个双重for循环，前面是站点，后面是具体的设备数据
                    $("#tb").append("     <tr >\n" +
                        "            <td class='"+result.massage[i].stationName+"' >"+result.massage[i].stationName+"</td>\n" +//然后这里就是站点的那一列，我把站点名称设置在了td的class里
                        "            <td>"+result.massage[i].masterDates[j].equipment+"</td>\n" +//这里就是设备名称，下面的我不想写了，所以全部用数字代表了
                        "            <td>4</td>\n" +
                        "            <td>5</td>\n" +
                        "            <td>6</td>\n" +
                        "            <td>7</td>\n" +
                        "            <td>8</td>\n" +
                        "        </tr>")
                }
            }
            for (var i=0;i<result.massage.length;i++){
                var stationName = result.massage[i].stationName; //这里我们在一次循环数据，获取站点的名字
                console.log(stationName)
                var id="."+stationName;
                console.log(id)//这里是拼接字符串
                var num=$(id).length;//然后获取这个class的长度
                console.log(num)
                $(id).not(":eq(0)").remove();//然后在这个class中除了第一个全部删除掉
                $(id).attr('rowspan',num);//然后合并class长度的单元格
            }
            
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
        }
    });
}

最后的效果如下