表格相同单元格数据进行合并

设计思路,将表格所需要合并的列的数据进行拼接.然后对每行比拼接的结果

使用时要引入Jquery 

<table style="width: 100%; border-collapse: collapse" id="GridView1" class="GridBody1" border="1" cellspacing="0"> <tbody> <tr class="Header"> <th scope="col"> 列1 </th> <th scope="col"> 列2 </th> <th scope="col"> 列3 </th> <th scope="col"> 列4 </th> </tr> <tr align="middle"> <td> 2010 </td> <td> <b>A</b> </td> <td> <b>1</b> </td> <td> 22 </td> </tr> <tr align="middle"> <td class="style1"> 2010 </td> <td class="style1"> A </td> <td class="style1"> 1 </td> <td class="style1"> 5 </td> </tr> <tr align="middle"> <td> 2010 </td> <td> B </td> <td> <b>3</b> </td> <td> 23 </td> </tr> <tr align="middle"> <td> 2011 </td> <td> <b>B</b> </td> <td> <b>1</b> </td> <td> 312 </td> </tr> <tr align="middle"> <td> 2011 </td> <td> C </td> <td> <b>1</b> </td> <td> 2 </td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () { mergeSameCellByColumnIndex("GridView1", [0, 1]); }); function mergeSameCellByColumnIndex(tableId, colIndexArr, startRowIndex) { ///<summary> /// 合并table中相同列中连续相同的单元格 tableId=表格Id ,colIndexArr=合并列索引数组,startRowIndex=合并起始行(可空) ///</summary> if (!colIndexArr | colIndexArr.length == 0) return; var table = document.all(tableId); if (!table) return; var lastCollectString = null; //最后一次遍历的tr拼接数据 var dict = new Dictionary(); //创建一个字典对象 var trCollection = $("#" + tableId + " tr"); //获取所有行 if (startRowIndex && startRowIndex >= 0) trCollection = $("#" + tableId + " tr:gt(" + startRowIndex + ")"); //如果有设置合并起始行索引则,跳过指定行数 trCollection.each(function () { var collectString = ""; //拼接指定列的行数据 for (var i = 0; i < colIndexArr.length; i++) { var currTd = $(this).find("td").eq(colIndexArr[i]); if (currTd && currTd.html() != null) { collectString = collectString + $.trim(removeHTML(currTd.html())); } } if (collectString == null || collectString == "") return; if (lastCollectString == collectString) { if (dict.Exists(collectString)) { var item = dict.Item(collectString); item.MergeCount = parseInt(item.MergeCount) + 1; //累计合并行数 item.HiddenRows.push($(this)); } else { dict.Add(collectString, { FirstRow: $(this), MergeCount: 1, HiddenRows: [] }); //将首次出现不同的Tr,以及合并列拼接的内容加入到字典中 } } else { dict.Add(collectString, { FirstRow: $(this), MergeCount: 1, HiddenRows: [] }); } lastCollectString = collectString; }); //移除字符串中HTML标记 function removeHTML(htmlString) { if (htmlString) { var mydiv = document.createElement("div"); mydiv.innerHTML = htmlString; if (document.all) { return mydiv.innerText; } else { return mydiv.textContent; } } } //遍历Dictionary,重置rowspan,设置td隐藏 var keys = dict.Keys(); for (var i = 0; i < keys.length; i++) { if (dict.Exists(keys[i])) { var rowMergeInfo = dict.Item(keys[i]); //设置rowspan for (var j = 0; j < colIndexArr.length; j++) { var _cellA = rowMergeInfo.FirstRow.find("td").eq(colIndexArr[j]); _cellA.attr("rowspan", rowMergeInfo.MergeCount); } //隐藏包含相同内容的td $.each(rowMergeInfo.HiddenRows, function () { for (var k = 0; k < colIndexArr.length; k++) { var _cellB = $(this).find("td").eq(colIndexArr[k]); _cellB.hide(); } }) } } dict = null; } //Dictionary 字典 function Dictionary() { this._obj = {}; this.count = 0; } Dictionary.prototype.Add = function (key, value) { if (typeof (this._obj[key]) != "undefined") { throw new Error("关键字[" + key + "]已存在！"); } this._obj[key] = value this.count += 1; }; Dictionary.prototype.Exists = function (key) { if (typeof (this._obj[key]) == "undefined") { return false; } return true; }; Dictionary.prototype.Item = function (key) { if (typeof (this._obj[key]) == "undefined") { this._obj[key] = null; } return this._obj[key]; }; Dictionary.prototype.Keys = function () { var keys = []; for (var p in this._obj) { keys[keys.length] = p; } return keys; }; </script>