Question

这是我目前遇到的问题。

我有一个包含五列和50行的HTML表。列中的一些单元格具有重复的文本，我希望可以选择合并或取消合并。这是我的合并功能

function mergeGridCells()
{
    var dimension_col = null;

    dimension_col = 1;

    // first_instance holds the first instance of identical td
    var first_instance = null;
    var rowspan=1;
    var columnCount = $("#mainTable tr:first th").length;

    for (dimension_col = 1; dimension_col <= columnCount; dimension_col++) {
        var first_instance = null;
        var rowspan = 1;
        $("#mainTable").find('tr:visible').each(function() {
            var dimension_td = $(this).find('td:nth-child(' + dimension_col + '):visible');
            if (first_instance == null) {
                // must be the first row
                first_instance = dimension_td;
            } else if (dimension_td.text() == first_instance.text()) {
                // the current td is identical to the previous
                // remove the current td
                dimension_td.hide();
                ++rowspan;
                // increment the rowspan attribute of the first instance
                first_instance.attr('rowspan', rowspan);
                first_instance.css('vertical-align', 'middle');
                first_instance.css('background-color', '#FFFFFF');
            } else {
                // this cell is different from the last
                first_instance = dimension_td;
                rowspan=1;
            }
        });
    }

    $('#mainTable tr > td:nth-child(1)').css('background-color', '#FFFFFF');
    $temp1 = $('#mainTable td:nth-child(1):not([rowspan]):visible');
    $temp1.css('background-color',$temp1.next().css('background-color'));

    $('#mainTable').trigger('update',[false]);
}

此功能适用于所有浏览器（Chrome，IE / Edge，Firefox和Opera）。问题是当我尝试在合并后取消合并单元格时。这是我目前用来取消合并单元格的函数。

function unmergeCells() {
        $temp = $("#mainTable td[rowspan]");

        $temp.each(function() {
            $(this).attr("rowspan", "0");   
        });

        $("#mainTable td:hidden").show();

        $("#mainTable td").css("background-color","");
        $("#mainTable tr:not(:has(th))").css("background-color","#FFFFFF");
        $("#mainTable tr:not(:has(th)):odd").css("background-color","#D4D4D4");
}

此功能适用于Chrome和Opera，但不适用于Firefox / Edge。有没有办法可以改进代码以使其在Firefox / Edge中运行？

合并/取消合并单元格不适用于IE或Firefox

0 个答案: