如何动态合并单元格

怎么把JSP中的table
  1   上海    中国
  2    上海   中国
  3    湖北   地球
  4    湖北   省
  5    江苏   省
合并成
  1    上海    中国
  2
  3    湖北    地球
  4           省
  5    江苏

1 个解决方案

#1

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
function rowSpan(){
//得到table对象
var tab = document.getElementById("tab");
if(!tab){
  return;
}
//从第二行开始，排除标题行
var startRow = 1;
//循环记录表格中td的内容,用来判断td中的value是否发生了改变
var tdTempV = "";
//如果td的值相同,那么变量加1, 否则将临时变量加入集合中
var rowCount = 1;
//得到相同内容的行数的集合www.2cto.com
var totalcount = new Array();

for(var i=1;i <tab.rows.length;i++) {
  //首先拿出来td的值
  var tdText = tab.rows[i].cells[0].innerText;
  //如果是第一次走循环,直接continue;
  if (i == startRow){
   tdTempV = tdText;
   continue;
  }
  //如果当前拿出来的值和出处的值相同,那么将临时数量加1，否则添加到集合里面
  if(tdTempV == tdText){
   rowCount++ ;
  }else{
   totalcount.push(rowCount);
   tdTempV = tdText;
   rowCount = 1;
  }

  //判断是否是循环的最后一次,如果是最后一次那个直接将当前的数量存储到集合里面
  if (i == tab.rows.length - 1)  {
   totalcount.push(rowCount);
  }
}
//临时变量,再循环中判断是否和数组中的一项值相同
var tNum = 0;
//注意这个循环是倒着来的
for (var i = tab.rows.length - 1; i >= startRow; i--){
  //临时变量,存储td
  var tTd=tab.rows[i].cells[0];
  tNum++;
  //如果发现tNum和数组中最后一个值相同,那么就可以断定相同的td已经结束[只是其中一个]
  if (tNum == totalcount[totalcount.length - 1]){
   //给当前td添加rowSpan属性
   tTd.setAttribute("rowSpan",totalcount[totalcount.length - 1]);
   //将数组的最后一个元素弹出
   totalcount.pop();
   tNum = 0;
  }else{
   //删除当前td
   tab.rows[i].removeChild(tTd);
  }
}
}

function autoRowSpan(tb,row,col)
    {
        var lastValue="";
        var value="";
        var pos=1;
        for(var i=row;i<tb.rows.length;i++)
        {
            value = tb.rows[i].cells[col].innerText;
            if(lastValue == value)
            {
                tb.rows[i].deleteCell(col);
                tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;
                pos++;
            }else{
                lastValue = value;
                pos=1;
            }
        }
    }

function SpanGrid(tabObj, colIndex) {
if (tabObj != null) {
var i, j;
var intSpan;
var strTemp;
colIndex=tabObj.cells.length;
for(k=0;k<colIndex;k++){
for (i = 0; i < tabObj.rows.length; i++) {
intSpan = 1;
strTemp = tabObj.rows[i].cells[k].innerText;
for (j = i + 1; j < tabObj.rows.length; j++) {
if (strTemp == tabObj.rows[j].cells[k].innerText) {
intSpan++;
tabObj.rows[i].cells[k].rowSpan = intSpan;
tabObj.rows[j].cells[k].style.display = "none";
} else {
break;
}
}
i = j - 1;
}
}
}
}

</script>
<style type="text/css">
#tab td{
border: 1px solid;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#tab tr{
border:1px solid;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#tab{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
</style>
  </head>

  <body>
   <span onclick="SpanGrid(tab,1)">合并</span>
    <table id="tab" style="border: 1px solid black;">
     <tr>
     <td>年度</td>
     <td>姓名</td>
     <td>年龄</td>
     <td>地址</td>
     </tr>
     <tr>
     <td>2012</td>
     <td>A</td>
     <td>15</td>
     <td>上海</td>
     </tr>
     <tr>
     <td>2012</td>
     <td>B</td>
     <td>12</td>
     <td>湖北</td>
     </tr>
     <tr>
     <td>2013</td>
     <td>C</td>
     <td>13</td>
     <td>上海</td>
     </tr>
     <tr>
     <td>2013</td>
     <td>D</td>
     <td>17</td>
     <td>上海</td>
     </tr>
     <tr>
     <td>2015</td>
     <td>D</td>
     <td>17</td>
     <td>上海</td>
     </tr>
     <tr>
     <td>2013</td>
     <td>D</td>
     <td>15</td>
     <td>上海</td>
     </tr>
     <tr>
     <td>2013</td>
     <td>E</td>
     <td>17</td>
     <td>上海</td>
     </tr>
    </table>
  </body>
</html>

秒客网

如何动态合并单元格

1 个解决方案

#1

#1

相关文章