js动态合并单元格（解决即给分）

数据是动态生成的。如：
姓名  性别 年龄 科目 分数
张三  男   22   数学  90
张三  男   22   语文  70
张三  男   22   英语  60
李四  女   19   数学  60
李四  女   19   语文  60
王五  男   20   英语  60要求用js把姓名、性别、年龄列相同的单元格合并。
因为结果集是查询得到的，所以要动态合并。
我已经实现了项目列相同单元格的合并，
但怎样将姓名、性别、年龄3列相同的单元格都合并呢？谢谢。代码如下
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
</head><body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>张三 </td>
    <td>男</td>
    <td>22</td>
    <td>数学 </td>
    <td>90 </td>
  </tr>
  <tr>
    <td>张三 </td>
    <td>男</td>
    <td>22</td>
    <td>语文 </td>
    <td>70 </td>
  </tr>
  <tr>
    <td>张三 </td>
    <td>男</td>
    <td>22</td>
    <td>英语 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>李四 </td>
    <td>女</td>
    <td>19</td> 
    <td>数学 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>李四 </td>
    <td>女</td>
    <td>19</td> 
    <td>语文 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td>王五 </td>
    <td>男</td>
    <td>19</td> 
    <td>英语 </td>
    <td>60 </td>
  </tr>
</table>
<script >
    var tab=document.getElementById("tab");
    var name="";
    for(var i=0,j=0;i <tab.rows.length;i++,j++) {
        if(name==tab.rows[i].cells[0].innerHTML) {
             tab.rows[i].deleteCell(0)
        } else  {
            name=tab.rows[i].cells[0].innerHTML;
            if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
            j=0;
        }
    }
    var name2="";
    for(var i=0,j=0;i <tab.rows.length;i++,j++) {
        if(name2==tab.rows[i].cells[1].innerHTML) {
             tab.rows[i].deleteCell(1)
        } else  {
            name2=tab.rows[i].cells[1].innerHTML;
            if(i>0)tab.rows[i-j].cells[1].rowSpan=j;
            j=0;
        }
    }
</script > 
</body>
</html>

解决方案 »

  1.   

    不要分开来，一次合并就好
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档 </title> 
    </head> <body> 
    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
      <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>数学 </td> 
        <td>90 </td> 
      </tr> 
      <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>语文 </td> 
        <td>70 </td> 
      </tr> 
      <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>英语 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>李四 </td> 
        <td>女 </td> 
        <td>19 </td> 
        <td>数学 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>李四 </td> 
        <td>女 </td> 
        <td>19 </td> 
        <td>语文 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>王五 </td> 
        <td>男 </td> 
        <td>19 </td> 
        <td>英语 </td> 
        <td>60 </td> 
      </tr> 
    </table> <script type="text/javascript">
    window.onload = function(){
    var tab = document.getElementById("tab");
    var name, sex, age, count, start;

    name = sex = age = "";
    count = 1;
    for(var i=0; i<tab.rows.length; i++){
    if(name == tab.rows[i].cells[0].innerHTML && sex == tab.rows[i].cells[1].innerHTML && age == tab.rows[i].cells[2].innerHTML){
    count++;
    }else{
    if(count > 1){ //合并
    start = i - count;
    tab.rows[start].cells[0].rowSpan = tab.rows[start].cells[1].rowSpan = tab.rows[start].cells[2].rowSpan = count;
    for(var j=start+1; j<i; j++){
    for(var k=0; k<3; k++){
    tab.rows[j].removeChild(tab.rows[j].cells[0]);
    }
    }
    count = 1;
    }
    name = tab.rows[i].cells[0].innerHTML;
    sex = tab.rows[i].cells[1].innerHTML;
    age = tab.rows[i].cells[2].innerHTML;
    }
    }
    };
    </script>
    </body> 
    </html>
      

  2.   

    Free_Wind22:你的代码不能实现动态数据呀？比如姓名里张三有4个或5个，还是不符合要求，怎么实现动态的呢？
    如：
    姓名  性别 年龄 科目 分数
    张三  男  22  数学  90
    张三  男  22  语文  70
    张三  男  22  英语  60
    张三  男  22  化学  60
    李四  女  19  语文  60
    王五  男  20  英语  60 
      

  3.   

    这个应该符合你这种需求了...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档 </title> 
    </head> <body> 
    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
      <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>数学 </td> 
        <td>90 </td> 
      </tr> 
       <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>数学 </td> 
        <td>90 </td> 
      </tr> 
      <tr> 
        <td>张三 </td> 
        <td>男 </td> 
        <td>22 </td> 
        <td>语文 </td> 
        <td>70 </td> 
      </tr> 
      <tr> 
        <td>张三 </td> 
        <td>女 </td> 
        <td>22 </td> 
        <td>英语 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>李四 </td> 
        <td>女 </td> 
        <td>22 </td> 
        <td>数学 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>李四 </td> 
        <td>女 </td> 
        <td>19 </td> 
        <td>语文 </td> 
        <td>60 </td> 
      </tr> 
      <tr> 
        <td>王五 </td> 
        <td>男 </td> 
        <td>19 </td> 
        <td>英语 </td> 
        <td>60 </td> 
      </tr> 
    </table> <script type="text/javascript">
    window.onload = function(){
    var tab = document.getElementById("tab");
    var maxCol = 3, val, count, start;

    for(var col = maxCol-1; col >= 0 ; col--){
    count = 1;
    val = "";
    for(var i=0; i<tab.rows.length; i++){
    if(val == tab.rows[i].cells[col].innerHTML){
    count++;
    }else{
    if(count > 1){ //合并
    start = i - count;
    tab.rows[start].cells[col].rowSpan = count;
    for(var j=start+1; j<i; j++){
    tab.rows[j].cells[col].style.display = "none";
    }
    count = 1;
    }
    val = tab.rows[i].cells[col].innerHTML;
    }
    }
    if(count > 1 ){ //合并，最后几行相同的情况下
    start = i - count;
    tab.rows[start].cells[col].rowSpan = count;
    for(var j=start+1; j<i; j++){
    tab.rows[j].cells[col].style.display = "none";
    }
    }
    }
    };</script>
    </body> 
    </html>
      

  4.   

    上面这个是用隐藏的，也可以用
    tab.rows[j].removeChild(tab.rows[j].cells[col]);来代替tab.rows[j].cells[col].style.display = "none";来删除多余的列
      

  5.   

    if(count > 1){ //合并
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for(var j=start+1; j<i; j++){
                            tab.rows[j].cells[col].style.display = "none";
                        }
                        count = 1;
                    }
    这一段代码没有用吧，而且只能实现合并两行的列行如果出了三行一样的，你应经把第二行的节点删除了，就没法用if中的val值比较了吧
      

  6.   

    不好意思刚才看错了。那段代码有用，不过后面的我试过了，应该还是隐藏好，如果用删除的话，就没法用if中的val值比较了。
      

  7.   

    【Free_Wind22】太给力， 自己搞了半天。。还是你这个写的好！
      

  8.   


    我把sex和age去掉，怎么就没用了呢...