Hi,
Is there a quick way to translate (using CSS or Javascript) a tables TD into TR, currently I have:
A B C D
1 2 3 4
and I want to translate to:
A 1
B 2
C 3
D 4
??
Hi,
Is there a quick way to translate (using CSS or Javascript) a tables TD into TR, currently I have:
A B C D
1 2 3 4
and I want to translate to:
A 1
B 2
C 3
D 4
??
You want to turn HTML arranged like this:
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
Into this:
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>
Correct?
You can do this with Javascript, however, it is difficult to suggest a method with out knowing more about the structure of your site/HTML files. I'll give it a go.
Assuming your <table>
tag comes with an id (like this: <table id="myTable">
you can access it in javascript like this:
var myTable = document.getElementById('myTable');
You can create a new table like this:
var newTable = document.createElement('table');
Now you need to transpose the old tables rows into the new tables columns:
var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
if(myTable.rows[r].cells.length > maxColumns) {
maxColumns = myTable.rows[r].cells.length;
}
}
for(var c = 0; c < maxColumns; c++) {
newTable.insertRow(c);
for(var r = 0; r < myTable.rows.length; r++) {
if(myTable.rows[r].length <= c) {
newTable.rows[c].insertCell(r);
newTable.rows[c].cells[r] = '-';
}
else {
newTable.rows[c].insertCell(r);
newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
}
}
}
This ought to do what you need. Be forewarned: not tested. Working this javascript code into an HTML page is left as an exercise for the reader. If anyone spots any errors that I missed, I be gratified if you point them out to me or simply edit to fix :)
Here is a tested function that will transpose a table, and it will preserve any formatting/events you had hooked to any elements within the table (ie: onclicks on cell or cell contents)
function TransposeTable(tableId)
{
var tbl = $('#' + tableId);
var tbody = tbl.find('tbody');
var oldWidth = tbody.find('tr:first td').length;
var oldHeight = tbody.find('tr').length;
var newWidth = oldHeight;
var newHeight = oldWidth;
var jqOldCells = tbody.find('td');
var newTbody = $("<tbody></tbody>");
for(var y=0; y<newHeight; y++)
{
var newRow = $("<tr></tr>");
for(var x=0; x<newWidth; x++)
{
newRow.append(jqOldCells.eq((oldWidth*x)+y));
}
newTbody.append(newRow);
}
tbody.replaceWith(newTbody);
}
Notes: - Requires Jquery - Not tested on very large tables - Will likely crap out on tables with spanned columns/rows - Will likely crap out on tables with any combination of thead/th
So as long as your tables have no spanned cells and doesnt use thead/th, should be good to go.
DEMO: http://jsbin.com/abaso3/2/edit
full commented on demo source!
$(function () {
var table = [];
$('table td').each( function (i) {
var half = ( $('table td').size() / 2 );
if ( i >= half ) {
i = i-half; $(this).attr('class','top');
} else {
i = i+half; $(this).attr('class','down');
}
if ( i < half )
table.push( '<tr><td>'+$('.down').eq(i).text()+'</td>',
'<td>'+$('.top').eq(i).text()+'</td></tr>' );
});
$('table').html( table.join('') );
});
- btw, if you want have the same result but with just CSS you need to use UL LI instead of TR TD something like this: http://designm.ag/tutorials/jquery-display-switch/