jquery 合併相鄰且內容相同單元格

阿新 • • 發佈：2019-02-05

公用的方法:

   1. //合併內容相同單元格  
   2. function mergeTableCell(table_id, table_colnum) {  
   3.     _w_table_firsttd = "";  
   4.     _w_table_currenttd = "";  
   5.     _w_table_SpanNum = 0;  
   6.     _w_table_Obj = $("#" + table_id + " tr td:nth-child(" + table_colnum + ")");  
   7.     _w_table_Obj.each(function(i) {  
   8.         if (i == 0) {  
   9.             _w_table_firsttd = $(this);  
  10.             _w_table_SpanNum = 1;  
  11.         } else {  
  12.             _w_table_currenttd = $(this);  
  13.             if (_w_table_firsttd.text() == _w_table_currenttd.text()) {  
  14.                 _w_table_SpanNum++;  
  15.                 _w_table_currenttd.hide();  
  16.                 _w_table_firsttd.attr("rowSpan", _w_table_SpanNum);  
  17.             } else {  
  18.                 _w_table_firsttd = $(this);  
  19.                 _w_table_SpanNum = 1;  
  20.             }  
  21.         }  
  22.     });  
  23. }

使用方法:

在jsp頁面中呼叫如下程式碼段:

# <script type="text/javascript">  
# /第一個引數代表table的ID,第二個引數表示要合併的列,從1開始  
#                      mergeTableCell("powergrid",1);  
# lt;/script>

合併列的公用方法:

function mergeTableRow(id,row,hide){

  var tds=$("#"+id).find("tr").eq(row-1).children();

  var first=null;

  var colspan=-1;

  var current=null;

  tds.each(function(i){

    if(i==0){

      first=$(this);

      colspan=1;

    }else{

      current=$(this);

      if(first.text()==current.text()){

      colspan++;

      if(hide)

       current.hide();

      else

       current.remove();

      first.attr("colspan",colspan);

      }else{

        first=$(this);

        colspan=1;

      }

    }

  })

}

使用方法:

在body中呼叫如下方法:

   1. <script type="text/javascript">   
   2.   try  
   3.   {  
   4.       mergeTableRow("summaryTable",2,false);  
   5.       mergeTableRow("summaryTable",1,false);  
   6.       
   7.       var len=800+300*(${fn:length(taskItemList)}*1);  
   8.       $("#summaryTable").css("width",len+"px");  
   9.   }  
  10.   catch(e)  
  11.   {  
  12.   }    
  13. </script>

有以下參考：

/*
*  jQuery tui tablespan plugin 0.2
*
*  Copyright (c) 2010 china yewf
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Create: 2010-09-16 10:34:51 yewf $
* Revision: $Id: tui.tablespan.js  2010-09-21 10:08:36 yewf $ 
*
* Table rows or cols span
*/
 
 
/* 行合併。索引從0開始，包含隱藏列，注意jqgrid的自動序號列也是一列。
使用方法：
$("#jqGridId").tuiTableRowSpan("3, 4, 8");
*/
jQuery.fn.tuiTableRowSpan = function(colIndexs) {
    return this.each(function() {
        var indexs = eval("([" + colIndexs + "])");
        for (var i = 0; i < indexs.length; i++) {
            var colIdx = indexs[i];
            var that;
            $('tbody tr', this).each(function(row) {
                $('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {
                    if (that != null && $(this).html() == $(that).html()) {
                        rowspan = $(that).attr("rowSpan");
                        if (rowspan == undefined) {
 
                            $(that).attr("rowSpan", 1);
                            rowspan = $(that).attr("rowSpan");
                        }
                        rowspan = Number(rowspan) + 1;
                        $(that).attr("rowSpan", rowspan); // do your action for the colSpan cell here
                        $(this).remove(); // .hide(); // do your action for the old cell here
                    } else {
                        that = this;
                    }
                    // that = (that == null) ? this : that; // set the that if not already set
                });
 
            });
        }
    });
};
 
/* 列表頭合併。
索引從0開始，包含隱藏列，注意jqgrid的自動序號列也是一列。
    
使用方法：
$("#jqGridId").tuiJqgridColSpan({ 
    cols: [
        { indexes: "3, 4", title: "合併後的大標題" },
        { indexes: "6, 7", title: "合併後的大標題" },
        { indexes: "11, 12, 13", title: "合併後的大標題" }
    ]
});
注意事項： 
1.沒有被合併的rowSpan=2，即兩行。列的拖拉有BUG，不能和jqgrid的顯示層位置同步；    
2.jqgrid的table表頭必須有aria-labelledby='gbox_tableid' 這樣的屬性；
3.只適用於jqgrid；
*/
var tuiJqgridColSpanInit_kkccddqq = false;
jQuery.fn.tuiJqgridColSpan = function(options) {
    options = $.extend({}, { UnbindDragEvent: true, cols: null }, options);
 
    if (tuiJqgridColSpanInit_kkccddqq) {
        return;
    }
 
    // 驗證引數
    if (options.cols == null || options.cols.length == 0) {
        alert("cols引數必須設定");
        return;
    }
 
    // 傳入的列引數必須是順序列，由小到大排列，如3,4,5
    var error = false;
    for (var i = 0; i < options.cols.length; i++) {
        var colIndexs = eval("([" + options.cols[i].indexes + "])");
 
        for (var j = 0; j < colIndexs.length; j++) {
            if (j == colIndexs.length - 1) break;
 
            if (colIndexs[j] != colIndexs[j + 1] - 1) {
                error = true;
                break;
            }
        }
 
        if (error) break;
    }
 
    if (error) {
        alert("傳入的列引數必須是順序列，如：3,4,5");
        return;
    }
 
    // 下面是對jqgrid的表頭進行改造
    var resizing = false,
    currentMoveObj, startX = 0;
 
    var tableId = $(this).attr("id");
    // thead
    var jqHead = $("table[aria-labelledby='gbox_" + tableId + "']");
    var jqDiv = $("div#gbox_" + tableId);
 
    var oldTr = $("thead tr", jqHead);
    var oldThs = $("thead tr:first th", jqHead);
 
    // 在原來的th上下分別增加一行，下面這行克隆，上面這行增加且height=0
    var ftr = $("<tr/>").css("height", "auto").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertBefore(oldTr);
    var ntr = $("<tr/>").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertAfter(oldTr);
    oldThs.each(function(index) {
        var cth = $(this);
        var cH = cth.css("height"), cW = cth.css("width"),
        nth = $("<th/>").css("height", cH),
        fth = $("<th/>").css("height", 0);
        // 在IE8或firefox下面，會出現多一條邊線，因此要去掉。
        if (($.browser.msie && $.browser.version == "8.0") || $.browser.mozilla) {
            fth.css({ "border-top": "solid 0px #fff", "border-bottom": "solid 0px #fff" });
        }
 
        if (cth.css("display") == "none") {
            nth.css({ "display": "none", "white-space": "nowrap", "width": 0 });
            fth.css({ "display": "none", "white-space": "nowrap", "width": 0 });
        }
        else {
            nth.css("width", cW);
            fth.css("width", cW);
 
            // 這裡增加一個事件，解決列的拖動
            var res = cth.children("span.ui-jqgrid-resize");
            res && res.bind("mousedown", function(e) {
                currentMoveObj = $(this);
                startX = getEventPos(e).x;
 
                resizing = true;
                document.onselectstart = new Function("return false");
            });
        }
        // 增加第一行
        fth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ftr);
 
        // 增加第三行
        cth.children().clone().appendTo(nth);
        nth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ntr);
    });
 
    // 列合併。注意：這裡不放在上面的迴圈中處理，因為每個遍歷都要執行下面的操作。
    for (var i = 0; i < options.cols.length; i++) {
        var colIndexs = eval("([" + options.cols[i].indexes + "])");
        var colTitle = options.cols[i].title;
 
        var isrowSpan = false;
        for (var j = 0; j < colIndexs.length; j++) {
            oldThs.eq(colIndexs[j]).attr({ "colSpan": colIndexs.length, "rowSpan": "1" });
 
            // 把被合併的列隱藏，不能remove，這樣jqgrid的排序功能會錯位。
            if (j != 0) {
                oldThs.eq(colIndexs[j]).attr("colSpan", "1").hide();
            }
 
            // 標記刪除clone後多餘的th
            $("thead tr:last th", jqHead).eq(colIndexs[j]).attr("tuidel", "false");
 
            // 增加列標題
            if (j == 0) {
                var div = oldThs.eq(colIndexs[j]).find("div.ui-jqgrid-sortable");
                var divCld = div.children();
 
                div.text(colTitle);
                div.append(divCld);
            }
        }
    }
    // 移除多餘列
    $("thead tr:last th[tuidel!='false']", jqHead).remove();
    // 對不需要合併的列增加rowSpan屬性
    oldThs.each(function() {
        if ($(this).attr("colSpan") == 1) {
            $(this).attr("rowSpan", 2);
        }
    });
 
    var jqBody = $(this);
    // 繫結拖動事件
    $(document).bind("mouseup", function(e) {
        var ret = true;
        if (resizing) {
            var parentTh = currentMoveObj.parent();
            var currentIndex = parentTh.parents("tr").find("th").index(parentTh);
 
            var width, diff;
            var tbodyTd = $("tbody tr td", jqBody);
            var currentTh = $("thead tr:first th", jqHead).eq(currentIndex);
 
            // 先使用td的寬度，如果td不存在，則使用事件寬度
            if (tbodyTd.length > 0) {
                diff = 0;
                width = parseInt(tbodyTd.eq(currentIndex).css("width"));
            }
            else {
                diff = getEventPos(e).x - startX;
                width = parseInt(currentTh.css("width"));
            }
 
            var lastWidth = diff + width;
            currentTh.css("width", lastWidth + "px");
 
            resizing = false;
            ret = false;
        }
        document.onselectstart = new Function("return true");
        return ret;
    });
 
    // 設定為已初始化
    tuiJqgridColSpanInit_kkccddqq = true;
 
    // 適應不同瀏覽器獲取滑鼠座標
    getEvent = function(evt) {
        evt = window.event || evt;
 
        if (!evt) {
            var fun = getEvent.caller;
            while (fun != null) {
                evt = fun.arguments[0];
                if (evt && evt.constructor == Event)
                    break;
                fun = fun.caller;
            }
        }
 
        return evt;
    }
 
    getAbsPos = function(pTarget) {
        var x_ = y_ = 0;
 
        if (pTarget.style.position != "absolute") {
            while (pTarget.offsetParent) {
                x_ += pTarget.offsetLeft;
                y_ += pTarget.offsetTop;
                pTarget = pTarget.offsetParent;
            }
        }
        x_ += pTarget.offsetLeft;
        y_ += pTarget.offsetTop;
        return { x: x_, y: y_ };
    }
 
    getEventPos = function(evt) {
        var _x, _y;
        evt = getEvent(evt);
        if (evt.pageX || evt.pageY) {
            _x = evt.pageX;
            _y = evt.pageY;
        } else if (evt.clientX || evt.clientY) {
            _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
            _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
        } else {
            return getAbsPos(evt.target);
        }
        return { x: _x, y: _y };
    }
};

# //jqGrid-ttable-rowspan  
# ////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
# /*用法 
# * $("#tableId").jqGridTableRowSpan("13,14,15");//要合併的列序號,雜湊形式 
# * 僅僅只適用於jqGrid 
# *  
# *  
#  * */  
# jQuery.fn.jqGridTableRowSpan = function(colIndexs) {    
#      return this.each(function() {    
#       var indexs = eval("([" + colIndexs + "])");    
#  for (var i = 0; i < indexs.length; i++) {    
#                                      var colIdx = indexs[i];   
#                                         var that=new Array();  
#                                         var firstrowspan=0;  
#     $('tbody tr', this).each(function(row) {  
#     for(var k=0;k<colIdx.length;k++){  
#  $('td:eq(' + colIdx[k] + ')', this).filter(':visible').each(  
#       function(col) {   
#     if (that[k] != null && $(this).html() == $(that[k]).html()) {   
#     rowspan = $(that[k]).attr("rowSpan");   
#      if (rowspan == undefined) {    
#         $(that[k]).attr("rowSpan", 1);    
#          rowspan = $(that[k]).attr("rowSpan");    
#                                      }  
#     rowspan = Number(rowspan) + 1;  
#       if(k==0){  
#      $(that[k]).attr("rowSpan", rowspan);   
#                      $(this).hide();                                     
# firstrowspan=rowspan;  
#   }  
#      if(k!=0&&rowspan<=firstrowspan){  
#      $(that[k]).attr("rowSpan", rowspan);      
#     $(this).hide();   }  
#      } else {  
#      if(k==0){  
# //if it is the first of the group then set others null ,  
#      that=new Array();  
#      that[0]=this;  
#      }else{  
#        that[k] = this;  
#          }  
#       }    
#                });    
#      }      
#  });   
#   }      });    
#      };

JSON 資料和顯示多個列合併為單個列的 jqGrid

我想要合併某些資料（3 到 1 列的地址列）的我檢索通過融合表從 JSONP 到 jqGrid。

誰知道這是否可能如何去做？不幸的是融合表 SQL API 目前不支援 CONCAT 通過選擇命令。

奧列格 · 提供的程式碼基本上 colspan ing 2 列如果一個有長時間的資料，但我真的希望能多個列中的資料，目前它只是一個jqGrid 中的列

先謝謝

編輯、新增程式碼片段：

datatype: "jsonp", // "json" or "jsonp"
colNames: ["id","lat","long","Name","Address","","","Postcode"],
colModel:[
    {name:'id',index:'id',key:true,sorttype:'int',hidden:true,sortable:true},
    {name:'latitude',index:'latitude',hidden:true},
    {name:'longitude',index:'longitude',hidden:true},
    {name:'name',index:'name',width:170,sortable:false,sorttype:'text'},
    {name:'address_line_1',index:'address_line_1',width:400,formatter:function (cellvalue, options, rowObject) {
        addPart1 = rowObject[4];
        addPart2 = rowObject[5];
        addPart3 = rowObject[6];
        fullAddress = addPart1 + addPart2 + addPart3;
        return fullAddress;},sortable:false,sorttype:'text'},
    {name:'address_line_2',index:'address_line_2',sortable:false,sorttype:'text',hidden:true},
    {name:'address_line_3',index:'address_line_3',sortable:false,sorttype:'text',hidden:true},
    {name:'postcode',label:'postcode',width:80,sortable:false,sorttype:'text'}      
],
jsonReader: {
    cell: "", // the same as cell: function (obj) { return obj; }
    root: "table.rows",
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.table.rows.length; }
},

這裡是通用公共資料示例從.gov 表（我的桌子基本上是相同的設定）。所以人們可以輕鬆地看到提問: 我將整理後的問題

<script type="text/javascript"> 
var queryText = "SELECT * FROM 185189";
jQuery(document).ready(function() {
    jQuery("#rTable").jqGrid({
        url: 'http://www.google.com/fusiontables/api/query?sql=' +
              encodeURI(queryText) + '&jsonCallback=?',
        postData: "",
        datatype: "jsonp",
        colNames: ["col1","col2","col3","col4"],
        colModel:[
            {name:'FACID',index:'FACID',key:true,sorttype:'int',sortable:true},
            {name:'FACNAME',index:'FACNAME'},
            {name:'FAC_ADDRESS1',index:'FAC_ADDRESS1',sortable:false,sorttype:'text'},
            {name:'FAC_ADDRESS2',index:'FAC_ADDRESS2',sortable:false,sorttype:'text'}
        ],
        jsonReader: {
            cell: "",
            root: "table.rows",
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.table.rows.length; }
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'name',
        sortorder: "asc",
        viewrecords: true,
        loadonce: true,
        height: "100%",
        multiselect: true,
        caption: ""
    }); // END CREATE GRID
    jQuery("#rTable").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); // paging options
});
</script>

您可以使用自定義格式化程式來構造列包含基於任何輸入的資料的行。rowObject引數表示的資料從伺服器返回的行。通過自定義格式化程式返回的字串是文字或 HTML 文字將顯示在單元格中。

如果你要執行上的問題應開機自檢與融合表使用該 URL。

更新：您可以以不同的方式解決組成列的問題。第一個舊版本的 jqGrid 工作，只重寫 formatter 以下函式：

formatter: function (cellvalue, options, rowObject) {
    var rowObject = arguments[2];
    if ($.isArray(rowObject)) {
        return rowObject[4] + rowObject[5] + rowObject[6];
    } else {
        return rowObject.address_line_1 +
            rowObject.address_line_2 +
            rowObject.address_line_3;
    }
}

小方式的缺點是你將會有不必要的隱藏列 address_line_2 和 address_line_3 ，你不會真的使用。

更優雅的解決方案將使用新 beforeProcessing 回撥函式（事件）（見我原本的建議，該功能在這裡）。唯一的情況下將資料從伺服器載入，將呼叫該函式。它允許您修改從 jqGrid 資料將被處理之前，伺服器返回的資料。在此案中可以事件使用預設值 jsonReader ：

colNames:["lat","long","Name","Address","Postcode"],
colModel:[{name:'latitude', hidden:true},{name:'longitude', hidden:true},{name:'name', width:170},{name:'address_line', width:400},{name:'postcode', width:80}],
cmTemplate:{ sortable:false},
beforeProcessing:function(data){var rows = data.table.rows, length = rows.length, i =0, row;
    data.page =1;
    data.total =1;
    data.records = length;
    data.rows =[];for(; i < length; i +=1){
        row = rows[i];
        data.rows.push({
            id: row[0],
            cell:[row[1], row[2], row[3], row[4]+ row[5]+ row[6], row[7]]});}delete data.table;}

我不具有原始 JSON 資料，不要測試上面的程式碼，但程式碼顯示了您可以如何構建基於從伺服器返回的原始資料的新資料。

jquery 合併相鄰且內容相同單元格

公用的方法: 1. //合併內容相同單元格 2. function mergeTableCell(table_id, table_colnum) { 3. _w_table_firsttd = ""; 4. _w_tabl

JQuery實現表格裡面的相同內容的單元格合併

Javascript合併表格中具有相同內容的單元格

HTML或者JSP的TABLE需要不同行但是內容相同的單元格進行合併，本文以省市縣為例，對錶格中的省市進行二級合併，具體的頁面程式碼和樣式不再展示，主要介紹JS如何實現TABLE的單元格合併（無需第三

使用js方法將table表格中指定列指定行中相同內容的單元格進行合並操作。

var get 是否 for true ntb doc ide 就是一、簡介使用js方法對html中的table表格進行單元格的行列合並操作。網上執行此操作的實例方法有很多，但根據實際業務的區別，大多不適用。所以在網上各位大神寫的方法的基礎上進行了部分修改以適合自己

JS合併相同單元格

實現思路： 1、找出需要合併的列（col） 2、遍歷table中的每一行（tr）。結合列數（col）。進行遍歷每一行的tr 3、判斷當前tr和下一行的tr是否相同，如果相同，那麼為下一行的tr新增一個class。方便後續刪除 4、為當前重複的第一項tr新增rowspan屬性 5、刪除帶有標記

學習vba之按列合併將選定區域的單元格合併成一列

學習VBA-合併列首先選定一個區域，將這個區域的內容按列合併到該區域的後一列中。學習過程中，如有錯誤或改進之處，還請多多指教！ Sub 合併列() Dim hang As Integer

VBA 根據Find方法根據特定內容查詢單元格

http://club.excelhome.net/thread-940744-1-1.html 2. Find方法的語法[語法]<單元格區域>.Find (What，[After]，[LookIn]，[LookAt]，[SearchOrder]，[Se

js--easyUI----jQuery easyui datagrid 點選某個單元格即進入編輯狀態，焦點移開後，儲存資料

以上為轉載內容，以下為自己驗證程式碼： function _createTable(data){ //對漢字進行轉碼 $.each(data.data, function(i, obj){ var eventName = unescape(ob

合併表格（Table）單元格

Imports ZwSoft.ZwCAD.Runtime Imports ZwSoft.ZwCAD.ApplicationServices Imports ZwSoft.ZwCAD.DatabaseServices Imports ZwSoft.ZwCAD.EditorIn

js控制單元格行列相同內容合併

tabObjId：table 的id cellindex ：無效，可根據需要修改成有效。 beginRow：從第幾行開始，暫時預設傳0，其他未測試。 function SpanGrid(tabObjId, cellindex, beginRow) { var c

Javascript合併表格相同內容單元格示例

效果圖: HTML程式碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

JS 合並單元格相同內容行和列

del nbsp ext 合並單元格 color class doc nal div <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD&

vue中表頭th 合併單元格，且表格列數不定的動態渲染方法

吐槽今天，在vue中遇到複雜表格的渲染，需要合併表頭的單元格，且合併單元格的那列還是動態資料，也就是說你不知道會有多少組要合併起來，哎，我也有點說不清楚，廢話不多說了，看程式碼把：程式碼示例 data資料是後端介面返回的，其中的資料格式是這樣的： [ { "studentId

Excel 批量快速合併相同的單元格：資料透視表、巨集程式碼、分類彙總

Excel 批量快速合併相同的單元格在製作Excel表格的時候，為了使得自己製作的報表更加簡潔明瞭，方便查閱，經常需要合併很多相同的單元格，如果有幾千幾萬條記錄需要合併的話，真的會讓

table合併單元格（Jquery 外掛）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

jquery合併前幾列單元格的方法

今天在合併單元格的時候出現了很多問題，現在記錄如下，如果只是簡單合併幾列的話，下面介紹的方法都是可以用的！具體使用哪一種方法，各位看官自取所需吧，如果有更好的方法，歡迎各位在評論裡給出，並且第二種方法如果有人有優化方案了，也可以告訴我，讓我繼續學

elementui——表格的相同內容單元格合拼

如何實現相同內容的單元格合併？ :span-method="objectSpanMethod" 定義一個空陣列：[] 定義一個變數：0 遍歷資料如果有相同資料在空陣列新增一個0(相同資料的起始位加1)，不相同在資料push 一個1（變數改成當前索引） <ht

關於前臺合併獲取後臺動態table中資料相同的單元格的問題;th td合併

將下面的這個演算法，直接複製到你的js裡面，最後面的那個是你獲取table的id，然後傳入合併哪一列就行了。 //合併單元格演算法 jQuery.fn.rowspan = function(colIdx) { //封裝的一個JQuery小外掛

JS前端合併TABLE相同列的單元格

function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_currenttd = ""; _w_table_Sp

Table內容後臺迴圈輸出時用js合併單元格

首先來回顧一下table最基礎的合併單元格方法（以下內容來源於網上資源的整理） table合併思想：當將多個內容合併時，就會有多餘的東西需要刪除，例如：有三列3個td，當合並時就需要刪除2個。合併單元格，就是刪除多餘td。推出一個合併刪除td的公式：刪除的個數=合併的個數

jquery 合併相鄰且內容相同單元格

JSON 資料和顯示多個列合併為單個列的 jqGrid

相關推薦