I found this feature here , and it almost completely meets my needs. The function iterates through the first column of the table, and the row combines similar values. It then iterates through the next column, and the row also concatenates these values, taking into account the merging of the column before it. So it is great for what I need.
function MergeCommonRows2(table, firstOnly) { var firstColumnBrakes = []; for (var i = 1; i <= table.find('th').length; i++) { var previous = null, cellToExtend = null, rowspan = 1; table.find("td:nth-child(" + i + ")").each(function (index, el) { if (previous == $(el).text() && $(el).text() !== "" && $.inArray(index, firstColumnBrakes) === -1) { $(el).addClass('hidden'); cellToExtend.attr("rowspan", (rowspan = rowspan + 1)); } else { if (firstOnly == 'first only') { if (i === 1) firstColumnBrakes.push(index); } else { if ($.inArray(index, firstColumnBrakes) === -1) firstColumnBrakes.push(index); } rowspan = 1; previous = $(el).text(); cellToExtend = $(el); } }); } }
However, I want to edit the function to consider classes. In other words, I want to edit the function to check the classes of the combined two strings first. And even if they have the same value, if they have different classes, so as NOT to concatenate the strings. I tried to edit the above function to do the same, but to no avail.
UPDATE
My attempts to edit the code were rather rude. Essentially, I put the code before the if , which adds the hidden class and says to summarize if previous.getClass = current.getClass , only then go to the if statement, which hides the class.
Here is the fiddle . I want to click the merge button, and since the "click me" cells have different classes between them, I don't want them to merge.
source share