Geek Answers Handbook

Convert TD columns to TR rows

Is there a quick way to translate (using CSS or Javascript) TD tables into TR, currently I have:

ABCD 1 2 3 4

and I want to translate into:

 A 1 B 2 C 3 D 4

??

+6
javascript html css html-table
source share
3 answers

You want to change the HTML 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>

In it:

 <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>

Correctly?

You can do this using Javascript, however it is difficult to suggest a method without knowing more about the structure of your site / HTML files. I will give it back.

Assuming the <table> has an identifier (for example: <table id="myTable"> ), you can access it in javascript as follows:

 var myTable = document.getElementById('myTable');

You can create a new table as follows:

 var newTable = document.createElement('table');

Now you need to move the old tables to the new table 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 should do what you need. Be warned: not verified. Working with this javascript code on an HTML page is left as an exercise for the reader. If someone sees errors that I missed, I will be satisfied if you point them to me or just edit to fix :)

+8
source share

Here is a proven function that will transpose the table and save any formatting / events that you connected to any elements of the table (for example: onclicks to the contents of a cell or cell).

 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: - JQuery required - Not tested on very large tables - Probably shit on tables with taut columns / rows - Probably shit on tables with any thead / th combination

So, until your tables have stretched cells and use thead / th, it should be nice to go.

+2
source share

This solution, in this case it is designed for mobile phones and tablets, removes media queries and absolute position th, and you have it!

based on this:

 table, thead, tbody, th, td, tr { display: block; }

http://css-tricks.com/responsive-data-tables/

+2
source share

More articles:


All Articles