transpose html table

[Lee]

Is there a good way to transpose an HTML table? Meaning, turn the
rows into columns and the columns into rows? I got this far but it's
not working yet. I'm using prototype/scriptaculous. Thanks for any
help.

function transposeHtmlTable(tableEl){
tableEl=$(tableEl);
var tbody=$(tableEl.getElementsByTagName('tbody')[0]);

// put the table into this array so that it can be transposed
var newTableArr=[];
var row=0;
tbody.select('tr').each(function(s){
newTableArr[row]=[];
var col=0;
s.select('td').each(function(t){
newTableArr[row][col]=t.innerHTML;
col++;
});
row++;
});

// transpose the array
var temp;
var transArr=[];
for(var row=0;row<newTableArr.length;row++){
transArr[row]=[];
for(var col=i+1;col<newTableArr[row].length;col++){
if(row==0){
transArr[col]=[];
}
transArr[col][row]=newTableArr[row][col];
}
}
newTableArr=transArr;

// replace table contents with transposed table
tbody.update();
for(var row=0;row<newTableArr.length;row++){
var tr=new Element('tr');
for(var col=0;col<newTableArr[row].length;col++){
var td=new Element('td');
td.update(newTableArr[row][col]);
tr.insert(td);
}
tbody.insert(tr);
}

return tableEl;
}

 

[Lee]

Or, I guess a function to transpose an array would be effective.

 

[RobG]

Or, I guess a function to transpose an array would be effective.

If you load DOM references into an array, you can put them straight
back into a table without needing innerHTML etc.

Below is some code that uses just DOM and no libraries and doesn't
user arrays either. It can likely be optimised a lot, but it shows
the basic principle. It only transposes the content of the first
tbody, diagonal cells are left as they are, other nodes are mirrored.
(e.g. row 2, cell 0 becomes row 0 cell 2).

Extra rows are added if there aren't enough, superfluous rows are
removed. It assumes every row has the same number of cells.

function transposeTable(id) {
var table = document.getElementById(id);
var tbody = table.tBodies[0];
var rows = tbody.rows;
var numRows = rows.length;
var numCells = rows[0].cells.length;
var i, j, k;

for(var r=0; r<numRows; r++) {
var currentRow = rows[r];

for (var c=r+1; c<numCells; c++) {

// skip diagonal cells
if (c != r) {

// Get the current (upper) cell to swap
var currentCell = currentRow.cells[c];

// Get the swap (lower) cell
var swapRow = rows[c];
var swapCell = swapRow && swapRow.cells[r]


// If both exist, swap them
if (currentCell && swapCell) {
currentRow.insertBefore(swapCell, currentCell);
swapRow.insertBefore(currentCell, swapRow.cells[r]);
}

// If current exists but not swap, keep adding cells
// from current row. Add rows if required
else if (currentCell) {
k = c;

do {

if (!swapRow) {
swapRow = currentRow.cloneNode(false);
tbody.appendChild(swapRow);
}

swapRow.appendChild(currentRow.cells[k]);
swapRow = rows[swapRow.rowIndex + 1];

// Increment counter to shortcut loop when finished
} while (++c < numCells)
}
}
}

// If there are more rows than cells, add cells to
// appropriate rows
if (r > numCells - 1) {

// Keep current row index
j = r;

while (currentRow) {
i = 0;

// Add cells from lower rows to upper rows
do {
rows.appendChild(currentRow.cells[0]);
} while (++i < numCells)

// Remove empty rows along the way
tbody.removeChild(currentRow);
currentRow = rows[j];

// Increment counter to shortcut loop when finished
r++;
}
}
}
}

 

[Lee]

That works, thanks!