Merging Unmergin Table Cells

Merging Unmergin Table Cells

Hi Guys,
Here is the issue I'm currently having.
I have a HTML table with five columns and 50 rows. some of the cells in the columns have repeated text that I would like to have the option to merge or unmerge. Here is my merge function
  2. function mergeGridCells()
  3. {
  4. var dimension_col = null;
  5.  
  6. dimension_col = 1;
  8. // first_instance holds the first instance of identical td
  9. var first_instance = null;
  10. var rowspan=1;
  11. var columnCount = $("#mainTable tr:first th").length;
  13. for (dimension_col = 1; dimension_col <= columnCount; dimension_col++) {
  14. var first_instance = null;
  15. var rowspan = 1;
  16. $("#mainTable").find('tr:visible').each(function() {
  17. var dimension_td = $(this).find('td:nth-child(' + dimension_col + '):visible');
  18. if (first_instance == null) {
  19. // must be the first row
  20. first_instance = dimension_td;
  21. } else if (dimension_td.text() == first_instance.text()) {
  22. // the current td is identical to the previous
  23. // remove the current td
  24. //var myBg = dimension_td.css('background-color');
  25. dimension_td.hide();
  26. ++rowspan;
  27. // increment the rowspan attribute of the first instance
  28. first_instance.attr('rowspan', rowspan);
  29. first_instance.css('vertical-align', 'middle');
  30. first_instance.css('background-color', '#FFFFFF');
  31. } else {
  32. // this cell is different from the last
  33. first_instance = dimension_td;
  34. rowspan=1;
  35. }
  36. });
  37. }
This function works great in all browser (Chrome, IE/EDGE, Firefox, Opera) the problem is when I try to unmerge the cells once they have been merge. Here is the function I'm currently using to unmerge the cells.

  2. function unmergeCells() {
  3. $temp = $("#mainTable td[rowspan]");
  5. $temp.each(function() {
  6. $(this).attr("rowspan", "0");
  7. });
  9. $("#mainTable td:hidden").show();
  11. $("#mainTable td").css("background-color","");
  12. $("#mainTable tr:not(:has(th))").css("background-color","#FFFFFF");
  13. $("#mainTable tr:not(:has(th)):odd").css("background-color","#D4D4D4");
  14. }
this function works well with Chrome and Opera but not in Firefox/Edge. Is there a way I can improve the code to make it work in firefox/Edge?
Any help will be greatly appreciated.