2. 程式人生 > >js豎列合併單元格

js豎列合併單元格

阿新 • • 發佈：2019-01-03
var fnMergeRowCell = function(maintbodyObj, limitRowOrRowIndexs) { var limitRow = null //從0~n列 var limitRowIndex = null; //具體限制某列，如[0,4,5] if(limitRowOrRowIndexs == undefined || limitRowOrRowIndexs == null) { limitRow = null
; limitRowIndex = null; } else { if($.isArray(limitRowOrRowIndexs)) { limitRowIndex = limitRowOrRowIndexs; limitRow = null; } else { limitRowIndex = null
; limitRow = limitRowOrRowIndexs; } } /** * 名稱說明 * 1. 主合併物件：設定rowspan的td * 2. 子合併物件：被隱藏的td * * 實現原理 * 1. 每行掃描，拿當前行和下一行做對比，如果值為一致，標記為主合併物件（在標記前要判斷是否為主標記物件，如果為子標記對物件進行data-ishide 標記 ）， * 2. 下一行自動標記上主合併物件的 data-pid */
var callAttr = "data-main"; var dataPidKey = "data-cid"; var $tbody = $(maintbodyObj); var trs = $tbody.find("tr"); for(var i = 0; i < trs.length; i++) { var $cr = $(trs[i]); var $nr = $(trs[i + 1]); var $crtd = $cr.find("td"); //當前行下面的td var $nrtd = $nr.find("td"); //下一行下面的td if(limitRow == null) { limitRow = $crtd.length; } for(var r = 0; r < limitRow; r++) { if(null != limitRowIndex) { if(limitRowIndex.indexOf(r) == -1) { continue; } } var $crtdRow = $($crtd[r]); var $nrtdRow = $($nrtd[r]); //當前行對應的單元格的值 和 下一行對應的單元格的值相同 if($crtdRow.html() == $nrtdRow.html()) { var dataId = $crtdRow.attr(dataPidKey); //如果為隱藏，則代表著這個已經是被合併的了，需要拿到data-pid if($crtdRow.attr(callAttr) != "false") { dataId = "coordinate_" + i + "_" + r; $crtdRow.attr(callAttr, "true").attr(dataPidKey, dataId); //標記主要主合併物件 } $nrtdRow.attr(callAttr, "false").attr(dataPidKey, dataId); $nrtdRow.hide(); } } } $tbody.find("[" + callAttr + "=true]").each(function(i, _d) { var dataPid = $(_d).attr(dataPidKey); $(_d).attr("rowspan", $tbody.find("[" + dataPidKey + "=" + dataPid + "]").length).addClass("center"); }); } fnMergeRowCell($("[name=maintbody]"), [0, 1, 2]);

相關推薦

js豎列合併單元格

var fnMergeRowCell = function(maintbodyObj, limitRowOrRowIndexs) { var limitRow = null //從0~n列 var limitRowInd

GRIDVIEW多行多列合併單元格（合併列）

左邊是原始資料的顯示，右邊是應用合併列之後的效果。 從圖中可以看到，二級指標有兩列，有的行中兩列的內容一樣，有的則不一樣，如果實現如右圖所示，看起來效果會更好一些。下面就著手實現這個功能，我的實現原理很簡單，就是遍歷GridView的行和遍歷行中的單元格，如果單元格的前一列和當前列的內容相同就合

使用js多級次合併單元格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

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

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

js控制合併單元格-行/列

//函式說明：合併指定表格（表格id為_w_table_id）指定列（列數為_w_table_colnum）的相同文字的相鄰單元格 //引數說明：_w_table_id 為需要進行合併單元格的表格的id。如在HTMl中指定表格 id="data" ，此引數應為 #data

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

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

AsposeWords操作表格合併單元格(word已經有的table 列 合併 指定兩個單元格 既可以橫向合併也可以縱向合併)-http://www.xiaoguo123.com/p/aspose_w

20180725 親測可以 xjh 強大的AsposeWords for java不僅支援建立表格，還支援合併單元格。今天就簡明扼要記錄下如何實現合併單元格。 大家可以完全套用本文提供的程式碼，只需要提供開始和結束的單元格即可實現合併，無需理解複雜的過程，真是簡潔好用啊。 此

ThinkPHP呼叫Excel類的基本用法設定（合併單元格,Sheet表標題，行高，列寬，字型，邊框，樣式）

合併單元格+字型樣式 //合併單元格 $objPHPExcel->getActiveSheet(0)->mergeCells('A1:R1'); //為合併單元格新增標題 $objPHPExcel->setActiveSheetIndex(0)

table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

PS:該程式碼用於學習，大部分不是原創，在他（她）人程式碼的基礎上修改成自己想實現的效果，來源不明，因此沒有加轉載連結，如有問題，先在這裡抱歉，請聯絡我刪除。 內容實現的效果與上一篇一樣，但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性，所以這個版本可以相容IE的高版本和低版本，測試用的版本時IE8

JS生成表格，合併單元格

在網上找了這麼多都沒有JS生成表格然後JS操作合併單元格的，或者是別人寫的太負責了，又不想去理解，所以就自己動手寫了個簡單點的。 其實程式碼也不多，思路清晰就基本上可以了。一開始的時候是被colspan

原生JS 實現表格的合併單元格

/* 引數:table或tbody的id,開始行號，結束行號，合併哪一列 mc('field_selection', 0, 4, 0); */

jQuery外掛來調整表列的大小colResizable.js 拖動改變單元格寬度

jQuery外掛來調整表列的大小 效果圖： colResizable colResizable是一個免費的jQuery外掛，旨在通過手動拖動列錨點來增強任何型別的HTML表物件，從而增加列重新調整大小的功能。它相容滑鼠和觸控裝置，並具有一些

POI 匯出Excel實現合併單元格以及列自適應寬度

目錄 參考推薦： POI 匯出Excel 1. 合併單元格 POI是apache提供的一個讀寫Excel文件的開源元件，在操作excel時常要合併單元格，合併單元格的方法是： public CellRang

JS合併單元格、JavaScript單元格合併

 <html>     <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">     <title>合併表格</title>     &

js動態生成表格【含合併單元格的表格】

最近遇到需求，動態生成表格，類似Excel，支援合併單元格的表格，程式碼分享給大家~ 一、網上找到的簡單生成表格的例子： 以下是生成規則表格m行*n列類似，可以直接開啟HTML檢視結果。 <!DOCTYPE html> <html l

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

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

Java匯出Excel表，POI 實現合併單元格以及列自適應寬度

 //字型          HSSFFont font = workbook.createFont();          font.setFontName("仿宋_GB2312");          font.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);//粗體顯示

table合併單元格 colspan（跨列）和rowspan（跨行）

        </td>      </tr>      <tr>         <td   width= "25% "> 　 </td>           <td   width= "25% "> 　 </td>  

C# Excel 行高,列寬,合併單元格,單元格邊框線,凍結

private _Workbook _workBook = null; private Worksheet _workSheet = null; private Excel.Application _excelApplicatin = null; _excelApplic

Excel 檔案匯出 js-xlsx合併單元格的實現 （vue）

頁面資料如下圖： export default { data() { return { tableData: [],