jQuery 用页眉和页脚转置 HTML 表格 [英] jQuery to transpose HTML table with header and footer

问题描述

我需要转置一个 HTML 表格(交换行和列).我发现了许多 jQuery 插件，但它们比我需要的要多.

I need to transpose an HTML table (swap rows and columns). I found numerous jQuery plugins but they are more than what I need.

我从改编了一些简洁的jQuery代码此堆栈，但它不适用于包含 thead 和 tfoot 元素的表.

I adapted some neat jQuery code from this stack but it does not work on tables that include thead and tfoot elements.

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;
}

我在下面创建了提供标记和代码示例的小提琴.有人可以更新该函数以使其支持 thead 和 tfoot 元素吗?

I created the fiddle below that provides an example of the markup and the code. Can someone update the function so it supports thead and tfoot elements?

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

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

Just like the existing code, the new code must maintain the class and style values on each td as well as the table itself so the CSS is applied properly. It also needs to fixup the tfoot so it contains the correct number td cells that wrap a non-breaking space.

推荐答案

我修改了这个函数，让它做我需要的事情.更新版本如下.

I hacked away at the function to get it to do what I need. The updated version is below.

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;
    }
}

我还在下面创建了更新的小提琴.

I also created the updated fiddle below.

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

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

I'm sure there are many optimizations or improvements that could be made so I am open to any suggestions that anyone might have.

这篇关于jQuery 用页眉和页脚转置 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！