IT技术之家

首页 > Java

Java

js动态合并单元格_weixin_45411740_js动态合并表格单元格

发布时间:2022-10-24 18:31:20 Java 0次 标签:java-ee json html5 javascript ajax
前几天做网页的时候涉及到动态合并单元格的问题,经过一番努力终于是做好了,所以现在把代 码贴出来。首先说一下我们要实现的效果原图是这样的然后我们要实现的效果是这样的而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的,下面贴代html代码如下<thead><tr> <th>站点</th> <th>车道</th&a...

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

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

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

而且呢表格的生成是发送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) {
        }
    });
}

最后的效果如下

?

?