Merge cells after dynamically generating a table in JS

Recently, the project encountered the problem of table cell merging. The requirement was as follows: First, send an ajax request to dynamically generate table data after the data is returned, however, if the number or (based on other content) are the same after generation, you need to merge cells and try google before doing so, but this requirement is not met on the Internet, so I wrote a simple one myself. As shown above: cells are merged based on the same adjacent numbers. Let's talk about the effect after implementation! The JSfiddle URL is as follows: click here to view the effect! Implementation idea: to dynamically generate data, the cells to be merged are not dynamically generated first. After Data Rendering is complete, perform the following operations: 1. traverse all tr tags, get all numbers and store them in the array, and perform deduplication on the array. 2. loop the new array after deduplication, And Then loop the tr tag to obtain the number and length attributes of the current tr respectively, then the number in tr is equal to the number of a new array after the loop, if they are equal, insert the td cell before the current tr and add the rowspan attribute. 3. Use the break statement to exit the current for loop and enter the next loop of the new array. The purpose is to insert the first entry of the same tr item to the merged cell. The HTML code is not pasted here. If you want to see it, go to the jsfiddle effect. All JS Code is as follows: copy the code // remove the array repeated item function unique (arr) {arr = arr | []; var obj ={}, ret = []; for (var I = 0, ilen = arr. length; I <ilen; I + = 1) {var curItem = arr [I], curItemType = typeof (curItem) + curItem; if (obj [curItemType]! = 1) {ret. push (curItem); obj [curItemType] = 1 ;}} return ret ;}/ ** $. ajax ({}); ** // If the returned data is as follows: var data = [{'key': [{'num1': '001', 'n2 ': '4', 'n3 ': '5'}]}, {'key': [{'num1': '002', 'n2 ': '44 ', 'n3 ': '55'}, {'num1': '002', 'n2 ': '44', 'n3': '55'}]}, {'key': [{'num1': '003 ', 'n2': '000000', 'n3 ': '000000'}, {'num1 ': '003 ', 'n2': '000000', 'n3 ': '000000'}]}, {'key': [{'num1': '004 ', 'n2 ': '000000', 'n3': '000000'}, {'num1': '004 ', 'n2': '000000', 'n3 ': '000000'}]; html = ""; ('0000j-tbody'0000.html (''); for (var I = 0; I <data. length; I ++) {for (var j = 0; j <data [I]. key. length; j ++) {html + = '<tr class = "j-number" data-num = "' + data [I]. key [j]. num1 + '"data-len ="' + data [I]. key. length + '">' +/* '<td>' + data [I]. key [j]. num1 + '</td>' + */'<td>' + data [I]. key [j]. n2 + '</td>' + '<td>' + data [I]. key [j]. n3 + '</td>' + '</tr>'; }}$ ("# j-tbody" ).html (html); var rets = []; // retrieve the attribute data-num $ ('. j-number '). each (function () {var num = $ (this ). attr ('data-num'); rets. push (num) ;}); var newArrs = unique (rets), domElems =$ ('. j-number '); // traverse the new array again for (var m = 0; m <newArrs. length; m ++) {for (var n = 0; n <domElems. length; n ++) {var elemNum = $ (domElems [n]). attr ('data-num'), elemLen = $ (domElems [n]). attr ('data-len'); if (newArrs [m] = elemNum) {var td = '<td rowspan = "' + elemLen + '">' + elemNum + '</td>'; $ (domElems [n]). prepend (td); break ;}}}