jQuery 转置带有页眉和页脚的 HTML 表格

Question

我需要转置 HTML 表格(交换行和列)。我发现了很多 jQuery 插件，但它们超出了我的需要。

我改编了一些简洁的 jQuery 代码 this stack但它不适用于包含 thead 和 tfoot 元素的表格。

function tableTransform(objTable) {
    objTable.each(function () {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function () {
            var i = 0;
            $(this).find("td").each(function () {
                i++;
                if (newrows[i] === undefined) {
                    newrows[i] = $("<tr></tr>");
                }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function () {
            $this.append(this);
        });
    });

    return false;
}

我创建了下面的 fiddle ，它提供了标记和代码的示例。有人可以更新该函数以支持 thead 和 tfoot 元素吗？

http://jsfiddle.net/4tobvo05/4/

就像现有代码一样，新代码必须维护每个 td 以及表本身的类和样式值，以便正确应用 CSS。它还需要修复 tfoot，以便它包含正确数量的 td 单元格，以包裹不间断的空格。

Answer 1

我对这个函数进行了修改，让它完成我需要的工作。更新版本如下。

function tableTransform(objTable) {
    if (typeof objTable != 'undefined') {
        objTable.each(function () {
            var $this = $(this);
            var newrows = [];
            $this.find("tbody tr, thead tr").each(function () {
                var i = 0;
                $(this).find("td, th").each(function () {
                    i++;
                    if (newrows[i] === undefined) {
                        newrows[i] = $("<tr></tr>");
                    }
                    newrows[i].append($(this));
                });
            });
            $this.find("tr").remove();
            $.each(newrows, function () {
                $this.append(this);
            });
        });
        //switch old th to td
        objTable.find('th').wrapInner('<td />').contents().unwrap();
        //move first tr into thead
        var thead = objTable.find("thead");
        var thRows = objTable.find("tr:first");
        var copy = thRows.clone(true).appendTo("thead");
        thRows.remove();
        //switch td in thead into th
        objTable.find('thead tr td').wrapInner('<th />').contents().unwrap();
        //add tr back into tfoot
        objTable.find('tfoot').append("<tr></tr>");
        //add tds into tfoot
        objTable.find('tbody tr:first td').each(function () {
            objTable.find('tfoot tr').append("<td>&nbsp;</td>");
        });
        return false;
    }
}

我还在下面创建了更新的 fiddle 。

http://jsfiddle.net/4tobvo05/7/

我确信可以进行许多优化或改进，因此我愿意接受任何人可能提出的任何建议。