JS動態生成表格後 合並單元格

最近做項目碰到表格中的單元格合並的問題,需求是這樣的,首先發ajax請求 請求回來後的數據 動態生成表格數據,但是生成後如果編號或者(根據其他的內容)有相同時,要合並單元格操作,在做之前也試著google下,但是網上沒有碰到這方面的需求,所以自己寫瞭一個簡單的。 

  

 

如上所示:是根據相鄰的編號相同 進行單元格合並。

 

先看看實現後的效果再聊吧!

 

JSfiddle鏈接地址如下:

 

 點擊我查看效果!

 

實現思路: 動態生成數據,那麼需要合並的單元格先不動態生成,等數據渲染完成後,再去做如下操作:

 

 1. 遍歷所有tr標簽,獲取所有的編號存入數組裡面去,並且對數組進行去重操作。

 

 2. 循環去重後的新數組,再去循環tr標簽,分別獲取當前tr上的編號和長度屬性,然後tr中的編號與循環後的新數組某項是否相等,如果相等的話,那麼在當前的tr前插入td單元格且加上rowspan屬性。

 

 3. 使用break語句,跳出當前的for循環,進入新數組下一次循環,目的是:隻取tr相同的項的第一項插入合並後的單元格。

 

 HTML代碼在此不貼代碼,要看的話 去jsfiddle效果裡面去看。

 

所有JS代碼如下:

 

復制代碼

//去掉數組重復項

   function unique(arr){

        arr = arr || [];

        var obj = {},

            ret = [];

        for(var i = 0, ilen = arr.length; i < ilen; i+=1) {

            var curItem = arr[i],

                curItemType = typeof(curItem) + curItem;

            if(obj[curItemType] !== 1) {

                ret.push(curItem);

                obj[curItemType] = 1;

            }

        }

        return ret;

    }

    /**

    $.ajax({

        

    });**/

    // 假如返回數據如下:

    var data = [{'key':[{'num1':'001','n2':'4','n3':'5'}]},

                {'key':[{'num1':'002','n2':'44','n3':'55'},{'num1':'002','n2':'44','n3':'55'}]},

                {'key':[{'num1':'003','n2':'444','n3':'555'},{'num1':'003','n2':'444','n3':'555'}]},

                {'key':[{'num1':'004','n2':'666','n3':'666'},{'num1':'004','n2':'666','n3':'666'}]}

               ];

        html = "";

    

    $('#j-tbody').html('');

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

        

        for(var j = 0; j < data[i].key.length; j++) {

            html += '<tr class="j-number" data-num="'+data[i].key[j].num1+'" data-len="'+data[i].key.length+'">'+

                      /*'<td>'+data[i].key[j].num1+'</td>'+ */

                      '<td>'+data[i].key[j].n2+'</td>'+

                      '<td>'+data[i].key[j].n3+'</td>'+

                    '</tr>';

        }

    }

    $("#j-tbody").html(html);

 

    var rets = [];

    // 遍歷tr 獲取屬性 data-num 

    $('.j-number').each(function(){

        var num = $(this).attr('data-num');

        rets.push(num);

    });

    var newArrs = unique(rets),

        domElems = $('.j-number');

    

    // 再次遍歷新數組

    for(var m = 0; m < newArrs.length; m++) {

        for(var n = 0; n < domElems.length; n++) {

            var elemNum = $(domElems[n]).attr('data-num'),

                elemLen = $(domElems[n]).attr('data-len');

            if(newArrs[m] == elemNum) {

                var td = '<td rowspan="'+elemLen+'">'+elemNum+'</td>';

                $(domElems[n]).prepend(td);

                break;

            }

        }

    }

發佈留言