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.

我从此堆栈但它不适用于包含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屋！