首页 > 代码库 > js合并table单元格实例

js合并table单元格实例

这里展示js合并table的单元格,代码亲测可行

后台采用springmvc搭建


Record实体类

public class Record {
    public String isp;
    public String large_area;
    public String province;
    public String name;
    public String age;
      ......   //省略get和set方法
 }


action方法

        @RequestMapping(value="http://www.mamicode.com/handlerList")
	public ModelAndView handlerList(HttpServletRequest request,
		HttpServletResponse response) throws Exception {
		List list = new ArrayList();
		Record record1 = new Record();
		record1.setIsp("CUC");
		record1.setLarge_area("广东");
		record1.setProvince("深圳");
		record1.setName("name1");
		record1.setAge("age1");
		
		Record record2 = new Record();
		record2.setIsp("CUC");
		record2.setLarge_area("广东");
		record2.setProvince("广州");
		record2.setName("name2");
		record2.setAge("age2");
		
		Record record3 = new Record();
		record3.setIsp("NU");
		record3.setLarge_area("江西");
		record3.setProvince("宜春");
		record3.setName("name3");
		record3.setAge("age3");
		
		
		Record record4 = new Record();
		record4.setIsp("NU");
		record4.setLarge_area("江西");
		record4.setProvince("宜春");
		record4.setName("name4");
		record4.setAge("age4");
		
		
		Record record5 = new Record();
		record5.setIsp("NU");
		record5.setLarge_area("江西");
		record5.setProvince("赣州");
		record5.setName("name5");
		record5.setAge("age5");
		
		Record record6 = new Record();
		record6.setIsp("NU");
		record6.setLarge_area("湖南");
		record6.setProvince("郴州");
		record6.setName("name6");
		record6.setAge("age6");
		
		
		list.add(record1);
		list.add(record2);
		list.add(record3);
		list.add(record4);
		list.add(record5);
		list.add(record6);
		Map map = new HashMap();
		map.put("list", list);
		return new ModelAndView("/showList",map);
	}


jsp页面展示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"src="http://www.mamicode.com/asserts/js/jquery-1.7.2.min.js"></script>    
</head>
<body>
    <table id="testTable" width="100%" border="1">
			<thead>
			   	<tr align="center">
			     <th width="94" height="38">运营商</th>
			     <th width="198" height="38" >7天平均冗余带宽(G)</th>
			     <th width="216" height="38" >今天冗余带宽(G)</th>
			     <th width="196" height="38" >未来30天冗余带宽(G)</th>
			     <th width="263" height="38" >目前已用带宽(G)</th>
			   </tr>
	   		</thead>
	   		<thbody>
	   		     <c:forEach var="item" items="${list}" varStatus="status">
			    	<tr>
			    	   <td>${item.isp }</td>
			    		<td>${item.large_area}</td>
						<td>${item.province}</td>
						<td>${item.name}</td>
						<td>${item.age}</td>
			    	</tr>
			     </c:forEach>	
	   		</thbody>
	   		
	</table>   		
</body>
</html>

 

可以看到未合并时效果如下:

wKiom1P1kLGhbTLtAAGpUr5Azgo260.jpg

jsp页面中添加相关的js片段后

<SCRIPT type="text/javascript">
$(document).ready(function () {

      table_rowspan("#testTable", 1);
      table_rowspan("#testTable", 2);
      table_rowspan("#testTable", 3);  
  })


//函数说明:合并指定表格(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格
//参数说明:table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="table1" ,此参数应为 #table1
//参数说明:table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
        function table_rowspan(table_id, table_colnum) {
            table_firsttd = "";
            table_currenttd = "";
            table_SpanNum = 0;
            colnum_Obj = $(table_id + " tr td:nth-child(" + table_colnum + ")");
            colnum_Obj.each(function (i) {
                if (i == 0) {
                    table_firsttd = $(this);
                    table_SpanNum = 1;
                } else {
                    table_currenttd = $(this);
                    if (table_firsttd.text() == table_currenttd.text()) {
                        table_SpanNum++;
                        table_currenttd.hide(); //remove();
                        table_firsttd.attr("rowSpan", table_SpanNum);
                    } else {
                        table_firsttd = $(this);
                        table_SpanNum = 1;
                    }
                }
            });
        }
        
        
        //函数说明:合并指定表格(表格id为table_id)指定行(行数为table_rownum)的相同文本的相邻单元格
        //参数说明:table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="table1" ,此参数应为 #table1
        //参数说明:table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
        //          如果为数字,则从最左边第一行为1开始算起。
        //          "even" 表示偶数行
        //          "odd" 表示奇数行
        //          "3n+1" 表示的行数为1、4、7、10.......
        //参数说明:table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
        //          此参数可以为空,为空则指定行的所有单元格要进行比较合并。
        function table_colspan(table_id, table_rownum, table_maxcolnum) {
            if (table_maxcolnum == void 0) {
                table_maxcolnum = 0;
            }
            table_firsttd = "";
            table_currenttd = "";
            table_SpanNum = 0;
            $(table_id + " tr:nth-child(" + table_rownum + ")").each(function (i) {
                row_Obj = $(this).children();
                row_Obj.each(function (i) {
                    if (i == 0) {
                        table_firsttd = $(this);
                        table_SpanNum = 1;
                    } else if ((table_maxcolnum > 0) && (i > table_maxcolnum)) {
                        return "";
                    } else {
                        table_currenttd = $(this);
                        if (table_firsttd.text() == table_currenttd.text()) {
                            table_SpanNum++;
                            table_currenttd.hide(); //remove();
                            table_firsttd.attr("colSpan", table_SpanNum);
                        } else {
                            table_firsttd = $(this);
                            table_SpanNum = 1;
                        }
                   }
                });
            });
        }
     
    </SCRIPT>



效果如下,可以看到字段相同的列已经进行合并了:

wKiom1P1kubgapSoAAGYgSkVvRw379.jpg

本文出自 “bulajunjun” 博客,请务必保留此出处http://5148737.blog.51cto.com/5138737/1543091