js動態的合併table的單元格

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

//多級次動態合併表格行 function checkArray(arr1,arr2){ for (var i = 0; i < arr1.length; i++) { if (arr1[i].innerText===arr2[i].innerText) { }else{ return false; } } return true; } function

dynamicMergeTableRow(tableId){ var tb = document.getElementById(tableId); var obj1; var obj2; var objtemp1 = []; var objtemp2 = []; var rowCount = tb.rows.length; console.info(rowCount); var colCount = tb.rows[0

].cells.length; console.info(rowCount); var colLength = 4; //命名(表頭除外) for (var i = 1; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString(); } } //從後往前檢查，進行逐列檢查合併,開始列為colLength-1

for (var col = colLength -1; col >= 0; col--) { //當col>0時有前方的單元格 if (col > 0) { //objtemp1為obj1左側所有單元格集合，初始objtemp1及obj1均從第二行開始(tb_1_) for (var l = 0; l < col; l++) { objtemp1[l] = document.getElementById("tb_1_" + l.toString()); } } obj1 = document.getElementById("tb_1_" + col.toString()); //obj2為obj1下方單元格,obj1從第二行開始，則obj2從第三行開始，遍歷以row=2為起始值 for (var row = 2; row < rowCount; row++) { //同obj1及objtemp1，col>0：即有前方單元格，此時有objtemp2 if (col > 0) { for (var l = 0; l < col; l++) { objtemp2[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString()); } } obj2 = document.getElementById("tb_" + row.toString() +"_"+ col.toString()); //定義完obj1/obj2/objtemp1/objtemp2後，開始合併 //第一層判斷：當obj1的值等於obj2時，即同一列的相鄰單元格值相同 if (obj1.innerText == obj2.innerText) { //第二層判斷：obj1/obj2所在列前方還有其他列：即col>0(此步判斷為單元格合併的依賴性提供支援) if (col > 0) { //第三層判斷：obj1/obj2所在列前方還有其他列，且objtemp1,objtemp2值完全相同，可以合併 if (checkArray(objtemp1,objtemp2)) { obj1.rowSpan++; obj2.parentNode.removeChild(obj2); } //第三層判斷：obj1/obj2所在列前方還有其他列，且objtemp1,objtemp2值不同，不可合併，並重新對obj1/objtemp1賦值，令其等於原來的obj2/objtemp2 else{ obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString()); for (var l = 0; l < col; l++) { objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString()); } } } //第二層判斷：obj1/obj2所在列為首列，直接合並 else{ obj1.rowSpan++; obj2.parentNode.removeChild(obj2); } } //第一層判斷：當obj1的值不等於obj2時，即同一列的相鄰單元格值不相，此時重新對obj1/objtemp1賦值，令其等於原來的obj2/objtemp2 else{ obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString()); for (var l = 0; l < col; l++) { objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString()); } } } objtemp1 = []; objtemp2 = []; } } dynamicMergeTableRow('table1');

動態合併table單元格（行列）

//動態合併單元格 function uniteTable(tableId,colLength) {//表格ID，表格列數 var tb=document.getElementById(tableId); tb.style.display=''; var

Vue.js 根據資料，進行Table單元格合併

表格程式碼 <table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%"> <thead> <tr> <th>

JS前端動態新增表格--包括合併指定單元格

var newRow = "";//全域性變數 var pubSum=1;//計數新增記錄次數 var panelTitle=$("#title").val(); var currExtBJ=""; var existMatterPrice=$("#matter_price

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

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

js動態修改、獲取table單元格的內容

<table border=1 width=200 height=150 id='tab'> <tr><td>111</td><td>111</td></tr> <tr><td>222</td&

JS合併相同單元格

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

layui table 單元格合併

在表格載入完成方法執行 done:function(res, curr, count){ merge(res); } //合併單元格 function merge(res) { var data = res.

js 表格合並單元格

als pan else == 包括 In sta tex HR 5列根據需要可添加或刪除 strOneTemp strTwoTemp strThreeTemp strFourTemp strFiveTemp //合並單元格 this.

html-table(單元格)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table

js動態刪除table中的一行的方法

//得到行物件 function getRowObj(obj) { var i = 0; while(obj.tagName.toLowerCase() != "tr"){ obj = obj.parentNode; if(obj.tagName.toLowerCase() == "ta

js動態新增table表的一行和刪除一行

<html> <title></titile> <body> <a href="javascript:addTr()">新增</a> <table id="tableId"> <tr>

POI匯入具有合併了單元格的Excel

　　POI進行單行單行地匯入的資料在網上有許多的文章，但是要匯入一個具有合併單元格的excel貌似比較難找。剛好最近完成了這樣的一個需求，要求匯入具有合併單元格的excel： 1 /** 2 * 讀取excel資料,呼叫這方法開始 3 * @param is 4 * @

js動態控制table的tr，td增加及刪除

html： <table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered tabl

向下合併空白單元格

轉別人的，但是忘記出處了 Sub SpecialMerge() Dim M, N, i, j, k1, k2 As Long Application.DisplayAlerts = False k1 = 1 k2 = 1 With Selection M = .Column

web優化之-mvc js動態合併動態壓縮去掉js重複引用 js快取 js延遲載入

做web前段也有一段時間了，對於web中js檔案的載入有些體會想跟大家一起分享一下。 1.首先說說js檔案的合併和壓縮吧為了便於集中式管理js的合併和壓縮我們建立一個Js.ashx檔案來專門處理合並壓縮,這裡我們借用Yahoo.Yui.Compressor工具來壓縮我們的

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

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

動態合併table資料相同列

1、引入jquery 2、引入jquery合併外掛： <script type="text/javascript"> jQuery.fn.rowspan = function(colIdx) { //封裝的一個JQuery小外掛

jqgrid動態設定某個單元格進入編輯狀態

一、關鍵點 1、點選修改按鈕時，設定列qtype的editable屬性值為true，表示此欄位可編輯；然後設定id對應的行進入編輯狀態，此時該行中所有的可編輯列都將進入編輯狀態。 $("#jqgridTable2").setColProp("qtype",{editable

js動態生產table、Div、select

一種方法： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd "> <html> <head

動態改變listctrl 單元格背景及文字顏色(非重寫控制元件)

CListCtrl 類裡面沒有直接改變單元格背景及文字顏色的成員函式，只有改變整個背景的顏色。我有時候只是需要把某個單元格的顏色改變來突出顯示就可以了：我們可以通過過載ListCtrl控制元件的Customdraw 訊息，然後在裡面寫一些程式碼就可以了； void