\(^_^)/ Javascript 合并表格中相同的列

最新推荐文章于 2020-06-04 17:12:02 发布

yanguz

最新推荐文章于 2020-06-04 17:12:02 发布

阅读量120

点赞数

分类专栏： Web 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yanguz/article/details/84267815

版权

Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
                  function uniteTdCells(tableId){
        var table = document.getElementById(tableId);
        for(i=0;i<table.rows.length;i++){
        for(c=0;c<table.rows[i].cells.length;c++){
            if(c==0||c==1||c==2||c==3)            //选择要合并的列序数，去掉默认全部合并
            for(j=i+1;j<table.rows.length;j++){
            var cell1=table.rows[i].cells[c].innerHTML;
            var cell2=table.rows[j].cells[c].innerHTML;
            if(cell1==cell2){
                    table.rows[j].cells[c].style.display='none';
                    table.rows[i].cells[c].rowSpan++;
            } else break;                        }
        }       }    }
              function closeTD(id){
        var table = document.getElementById(id);
        for(i=0;i<table.rows.length;i++){
        for(c=0;c<table.rows[i].cells.length;c++){
                         if(c==1||c==2)
                    if(table.rows[i].cells[c].style.display=='none')
                    table.rows[i].cells[c].style.display='block';
                    else if(table.rows[i].cells[c].style.display=='block'||table.rows[i].cells[c].style.display=='')
                    table.rows[i].cells[c].style.display='none';
        }
          }            }
</script>
        <table border="1" id="dd">
            <tr><td>1</td><td>3</td><td>5</td><td>1</td></tr>
            <tr><td>1</td><td>3</td><td>5</td><td>1</td></tr>
            <tr><td>2</td><td>3</td><td>8</td><td>1</td></tr>
            <tr><td>2</td><td>4</td><td>8</td><td>3</td></tr>
            <tr><td>2</td><td>3</td><td>3</td><td>4</td></tr>
            <tr><td>2</td><td>3</td><td>3</td><td>4</td></tr>
            <tr><td>2</td><td>4</td><td>8</td><td>4</td></tr>
            <tr><td>2</td><td>4</td><td>8</td><td>4</td></tr>
        </table>
    <input type="button" value="合并" οnclick="uniteTdCells('dd')">
    <input type="button" value="隐藏/显示列" οnclick="closeTD('dd')">
    <input type="button" value="刷新" οnclick="location.href='uniteCells.html'">
  </body>
</html>