jQuery转换带有页眉和页脚的HTML表

我需要转置一个HTML表（交换行和列）。 我找到了很多jQuery插件，但它们不仅仅是我需要的。

我从这个堆栈中调整了一些简洁的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] = $(""); } newrows[i].append($(this)); }); }); $this.find("tr").remove(); $.each(newrows, function () { $this.append(this); }); }); return false; } 

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

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

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

Answer 1

我破解了这个function，让它去做我需要的东西。 更新版本如下。

 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] = $(""); } newrows[i].append($(this)); }); }); $this.find("tr").remove(); $.each(newrows, function () { $this.append(this); }); }); //switch old th to td objTable.find('th').wrapInner('').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('').contents().unwrap(); //add tr back into tfoot objTable.find('tfoot').append(""); //add tds into tfoot objTable.find('tbody tr:first td').each(function () { objTable.find('tfoot tr').append(" "); }); return false; } } 

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

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

我确信可以进行许多优化或改进，因此我对任何人可能提出的任何建议持开放态度。

Answer 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(""); } 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); }); });