前台接收后台传过来的list进行遍历,然后根据表格用合并rowspan列

本文链接：https://blog.csdn.net/qq_37411065/article/details/74911244

本文介绍了一种使用Spring MVC后台框架配合jQuery前端插件实现表格中特定列数据重复时进行单元格合并的方法。通过具体代码示例展示了如何在后端获取数据并传递到前端，以及前端如何利用jQuery插件实现跨行单元格的合并。

摘要由CSDN通过智能技术生成

将数据以表格的信息进行展示,但是两行的开头要进行合并,可以用好多方法,下面是其中的一种：

后台代码使用的是spring mvc(我进行了简化)：

	ModelAndView mv = new ModelAndView("页面路径");
	List<MeetInfoBo> list = this.meetFindManager.findMeetInfoList();
	mv.addObject("list", list);
	return mv;

前台代码：

	<table class="table_solid" border="0" cellspacing="0" id="list">
			<tr>
				<th width="16%">星期</th>
				<th width="16%">会议或活动名称</th>
				<th width="16%">开始时间</th>
				<th width="16%">结束时间</th>
				<th width="16%">主办单位</th>
				<th width="16%">会议地点</th>
			</tr>
			<c:if test="${not empty list}">
				<c:forEach items="${list}" var="item" varStatus="status">
					<tr id="list">
						<td>${item.weeks}</td>
						<td>${item.title}</td>
						<td>${item.beginDate}</td>
						<td>${item.endDate}</td>
						<td>${item.zbdw}</td>
						<td>${item.meetPlace}</td>
					</tr>
			</c:forEach>
			</c:if>
	</table>

下面是js代码：

	jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
        return this.each(function(){
        var that;
        $('tr', this).each(function(row) {
        $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
        if (that!=null && $(this).html() == $(that).html()) {
        rowspan = $(that).attr("rowSpan");
        if (rowspan == undefined) {
        $(that).attr("rowSpan",1);
        rowspan = $(that).attr("rowSpan"); }
        rowspan = Number(rowspan)+1;
        $(that).attr("rowSpan",rowspan);
        $(this).hide();
        } else {
        that = this;
        }
        });
        });
        });
        }
        //调用表单的id
		$("#list").rowspan(0);
		$(function() {
        	$("#list").rowspan(0); //传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值
        	$("#list").rowspan(1);
                    });