Home > Developer > Web Develop
Js merges table cells (the number of rows and columns is unknown when table is spelled) and the number of table columns
Sys. Application. add_load (function () {var tab = document. getElementById ("ctl00_ContentPlaceHolder1_viewcontrolTT_Repeater1_ctl00_viewcontrolTT_grid"); // The tableID if (! Tab) {alert ("table not obtained! ");} Else {// from the second row, exclude the title line var startRow = 1; // record the contents of td in the table cyclically, used to determine whether the value in td has changed var td1TempV = ""; var td2TempV = ""; var td3TempV = ""; // if the value of td is the same, add 1 to the variable, otherwise, add the temporary variable to the set var rowCount1 = 1; var rowCount2 = 1; var rowCount3 = 1; // get the set of the number of rows with the same content www.2cto.com var totalcount1 = new Array (); var totalcount2 = new Array (); var totalcount3 = new Array (); for (var I = 1; I <tab. rows. length; I ++) {// get out td first Value var td1Text = tab. rows [I]. cells [0]. innerText; var td2Text = tab. rows [I]. cells [1]. innerText; var td3Text = tab. rows [I]. cells [2]. innerText; // if this is the first cycle, directly continue; if (I = startRow) {td1TempV = td1Text; td2TempV = td2Text; td3TempV = td3Text; continue ;} // if the current value is the same as the source value, add 1 to the temporary quantity; otherwise, add it to the set if (td1TempV = td1Text & td1Text! = Null & td1Text! = "") {RowCount1 ++;} else {totalcount1.push (rowCount1); td1TempV = td1Text; rowCount1 = 1;} if (td2TempV = td2Text & td2Text! = Null & td2Text! = "") {RowCount2 ++;} else {totalcount2.push (rowCount2); td2TempV = td2Text; rowCount2 = 1;} if (td3TempV = td3Text & td3Text! = Null & td3Text! = "") {RowCount3 ++;} else {totalcount3.push (rowCount3); td3TempV = td3Text; rowCount3 = 1;} // determines whether it is the last cycle, if it is the last time that the current quantity is directly stored in the set if (I = tab. rows. length-1) {totalcount1.push (rowCount1); totalcount2.push (rowCount2); totalcount3.push (rowCount3);} // temporary variable, judge whether it is the same as a value in the array during recycling var tNum1 = 0; var tNum2 = 0; var tNum3 = 0; // note that this loop is inverted for (var I = tab. rows. length-1; I> = startRow; I --) {// temporary variable, store td var tTd1 = tab. rows [I]. cells [0]; var tTd2 = tab. rows [I]. cells [1]; var tTd3 = tab. rows [I]. cells [2]; tNum1 ++; tNum2 ++; tNum3 ++; if (tab. rows. length = 2) {continue;} // If the tNum is the same as the last value in the array, then we can conclude that the same td has ended [only one of them] if (tNum1 = totalcount1 [totalcount1.length-1]) {// Add the rowSpan attribute tTd1.setAttribute ("rowSpan", totalcount1 [totalcount1.length-1]) to the current td; tTd1.setAttribute ("style", "background-color: # ffffff "); // bring totalcount1.pop (); tNum1 = 0;} else {// Delete the current td tab. rows [I]. removeChild (tTd1);} if (tNum2 = totalcount2 [totalcount2.length-1]) {// Add the rowSpan attribute tTd2.setAttribute ("rowSpan ", totalcount2 [totalcount2.length-1]); tTd2.setAttribute ("style", "background-color: # ffffff"); // bring totalcount2.pop () to the last element of the array (); tNum2 = 0;} else {// Delete the current td tab. rows [I]. removeChild (tTd2);} if (tNum3 = totalcount3 [totalcount3.length-1]) {// Add the rowSpan attribute tTd3.setAttribute ("rowSpan ", totalcount3 [totalcount3.length-1]); tTd3.setAttribute ("style", "background-color: # ffffff"); // bring totalcount3.pop () to the last element of the array (); tNum3 = 0;} else {// Delete the current td tab. rows [I]. removeChild (tTd3 );}}}});
Use html dom object methods in combination;
1. delete HTML elements <! DOCTYPE html> <body> <div id = "div1"> <p id = "p1"> I am P1 </p> <p id = "p2"> I am P2 </p> </div> <script> var parent = document. getElementById ("div1");, find the element id = "div1": var child = document. getElementById ("p2");, find the <p> element of id = "p1": parent. removeChild (child);, removes child elements from the parent element: </script> </body>
Answer: How to Use JS to merge and split Table cells
On that site. But you cannot find the example.
To51windows (haiwa) and inelm (wooye HU ):
None of your examples meet my requirements.
The online editor is fine, but the operation is not convenient. And no code. In addition, there is a Bug when splitting cells.
Toawaysrain (absolute zero ):
The code you provided is exactly what I dreamed. There is no problem in testing in a simple square table.
Unfortunately, tests are performed in tables with complicated colSpan and rowSpan. This algorithm cannot merge cross-row operations.
After the cross-Column cell merge is completed, rowSpan of other cells in the affected range is not processed, which leads to table confusion after multiple merge operations.
My own algorithms have similar issues with this algorithm.
Please provide some reference. Thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
