在页面怎么动态合并相同类别的单元格

2013-12-09

在页面如何动态合并相同类别的单元格我在后台传来来一个List,里面内容如下：工作名称　　　执行者　　　　工期111

在页面如何动态合并相同类别的单元格
我在后台传来来一个List,里面内容如下：
工作名称　　　执行者　　　　工期
111           张三    5
222           李四    6
111           王五    7
333           小赵          3　

需要在jsp页面显示内容如下：
在页面怎么动态合并相同类别的单元格
怎么合并相同工作名称的单元格呢？
[解决办法]
首页你在后台先拼成正确的顺序。然后在前台操作。有2种方法。一种是直接全部输出。然后输出完js 判断合并。另一种方法是通过标签，循环判断，相同的就合并。
[解决办法]
后台根据工作名称group by 把count的次数放到map里面  页面根据次数获得合并几行   简单方法：前台框架（jquery的easyui等等）
[解决办法]
这个方法真是多了去了。用<c:if 可以判断相同的
[解决办法]
网上找了个js 的。

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <title>合并表格</title>

  <script>

  ///////////////////////////////////////////////

  //功能：合并表格

  //参数：tb－需要合并的表格ID

  //参数：colLength－－需要对前几列进行合并，比如，

  //想合并前两列，后面的数据列忽略合并，colLength应为2

  //缺省表示对全部列合并

  ///////////////////////////////////////////////

  function uniteTable(tb,colLength){

  //检查表格是否规整

  if(!checkTable(tb)) return;

    var i=0;

    var j=0;

    var rowCount=tb.rows.length; //行数

    var colCount=tb.rows[0].cells.length; //列数

    var obj1=null;

    var obj2=null;

    //为每个单元格命名

    for(i=0;i<rowCount;i++){

      for(j=0;j<colCount;j++){

        tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString();

      }

    }

    //逐列检查合并

    for(i=0;i<colCount;i++){

      if(i==colLength) return;

      obj1=document.getElementById("tb__0_"+i.toString())

      for(j=1;j<rowCount;j++){

        obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString());

        if(obj1.innerText==obj2.innerText){

          obj1.rowSpan++;

          obj2.parentNode.removeChild(obj2);

        }else{

          obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString());

        }

      }

    }

  }



  /////////////////////////////////////////

  //功能：检查表格是否规整

  //参数：tb－－需要检查的表格ID

  //data: 2011.11.06

  /////////////////////////////////////////

  function checkTable(tb){

    if(tb.rows.length==0) return false;

    if(tb.rows[0].cells.length==0) return false;

    for(var i=0;i<tb.rows.length;i++){

      if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false;

    }

    return true;

  }

  </script>

  </head>

  <body>

  <table width="400" border="1" id="table1">

      <tr>

          <td>a</td>

          <td>for</td>

          <td>100</td>

          <td>200</td>

          <td>1</td>

      </tr>

      <tr>

          <td>a</td>

          <td>for</td>

          <td>100</td>

          <td>300</td>

          <td>2</td>

      </tr>

      <tr>

          <td>a</td>   www.2cto.com

          <td>if</td>

          <td>100</td>

          <td>200</td>

          <td>3</td>

      </tr>

      <tr>

          <td>a</td>

          <td>if</td>

          <td>300</td>

          <td>230</td>

          <td>4</td>

      </tr>

      <tr>

          <td>a</td>

          <td>if</td>

          <td>320</td>

          <td>230</td>

          <td>5</td>

      </tr>

  </table>

  <br><input type="button" value="合并表格" onClick="uniteTable(table1,4)">

  </body>

  </html>、

热点排行

Java Web开发

在页面怎么动态合并相同类别的单元格