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

【问题标题】：jQuery to transpose HTML table with header and footerjQuery 转置带有页眉和页脚的 HTML 表格
【发布时间】：2017-10-17 02:47:49
【问题描述】：

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

我从 this stack 改编了一些简洁的 jQuery 代码，但它不适用于包含 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;
}

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

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

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

【问题讨论】：

这似乎主要工作。您需要更改的关键是告诉您的td 选择器也寻找th。 $(this).find("td, th").each(function () { ... }

标签： jquery html-table transpose

【解决方案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;
    }
}

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

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

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

【讨论】：

我可以将此函数用于我的 SharePoint 表。它需要做很多工作，但它是可行的。整洁！

【解决方案2】：

此代码也适用于 row 和 colspan。

jQuery("#table1").each(function() {
  var jthis = jQuery(this);
  var newrows = [];
  var row = 0;
  jthis.find("tr").each(function(){
    row++;
    var col = 0;
    var prev_colspan = 0;
    var prev_rowspan = 0;
    var row_count = 0;
    jQuery(this).find("td").each(function(){
      col++;
      var colspan = jQuery(this).attr("colspan");
      var rowspan = jQuery(this).attr("rowspan");
      if (colspan === undefined) {colspan = 0;}
      if (rowspan === undefined) {rowspan = 0;}
      jQuery(this).attr("rowspan",colspan);
      jQuery(this).attr("colspan",rowspan);           
      var existing_row = jQuery(this).attr("row");
      var existing_col = jQuery(this).attr("col");
      row_count = col + prev_colspan;

      if (existing_row === undefined || existing_col === undefined) {
        jQuery(this).attr("row", row + prev_rowspan);
        jQuery(this).attr("col", col + prev_colspan);
      }
      else {
        row_count = existing_row;
        jQuery(this).attr("col", existing_row);
        jQuery(this).attr("row", existing_col);
      }
      if(newrows[row_count] === undefined) { newrows[row_count] = jQuery("<tr></tr>"); }
      newrows[row_count].append(jQuery(this));
      if (existing_row === undefined || existing_col === undefined) {
        if (colspan > 0) {prev_colspan = parseInt(colspan) - 1; }
        else {prev_colspan = 0;}
        if (rowspan > 0) {prev_rowspan = parseInt(rowspan) - 1;}
        else {prev_rowspan = 0;}
      }
    });
  });
  jthis.find("tr").remove();
  jQuery.each(newrows, function(){
    jthis.append(this);
  });
});

【讨论】：