Jump to content

Reformatting table rows into columns


Rothgarr
 Share

Recommended Posts

Background:I have to work with a table that's being auto-generated on the fly, and I can't change the fact that a table is created. The table is always one column, but the rows vary from between 4 and 8 rows.Task:I need to figure out a way to have the rows actually display as columns. So if the table generated looks like this:

- one- two- three- four- five- six

I want to find a way so that on output the table actually looks like this:

- one - two - three - four - five - six

What I tried:I basically tried all the tricks I know to get a list items to all appear on a single line, but nothing worked -- the table always looks like rows. Is this an impossible task? Anyone know a way to perform this that is cross-browser compatible?If there is no way to do this with CSS, has anyone heard of a way to do this with javascript or another technology?Thanks!

Link to comment
Share on other sites

You bet. I've tried a gazillion variations, but below is the code in its simplest form. I was hoping it would be as simple as styling TR with display: inline... I don't know, maybe tables can't be styled the same way lists can...

<html><head><title>Table Test</title><style type="text/css"><!--tr {	float: left;	display: inline;}--></style></head><body><table>  <tr>	<td>one</td>  </tr>  <tr>	<td>two</td>  </tr>  <tr>	<td>three</td>  </tr></table></body></html>

Link to comment
Share on other sites

[...] If there is no way to do this with CSS, has anyone heard of a way to do this with javascript or another technology?Thanks!
I'd be surprised if you could do it with CSS. I expect there are various ways of doing it in javascript though. For instance:
	function reformatTable()	{		var t = document.getElementById("mytable");		var oldCells = t.getElementsByTagName("td");		var cellValues = new Array();		for (var i = 0; i < oldCells.length; i++)			cellValues[i] = oldCells[i].firstChild.nodeValue;						for (var i = t.rows.length-1; i >= 0; i--)			t.deleteRow(i);					var newRow = t.insertRow(0);				for (var i = 0; i < cellValues.length; i++)		{			var newCell = newRow.insertCell(i);			newCell.appendChild(document.createTextNode(cellValues[i]));		}	}

Link to comment
Share on other sites

I'd be surprised if you could do it with CSS. I expect there are various ways of doing it in javascript though. For instance:
	function reformatTable()	{		var t = document.getElementById("mytable");		var oldCells = t.getElementsByTagName("td");		var cellValues = new Array();		for (var i = 0; i < oldCells.length; i++)			cellValues[i] = oldCells[i].firstChild.nodeValue;						for (var i = t.rows.length-1; i >= 0; i--)			t.deleteRow(i);					var newRow = t.insertRow(0);				for (var i = 0; i < cellValues.length; i++)		{			var newCell = newRow.insertCell(i);			newCell.appendChild(document.createTextNode(cellValues[i]));		}	}

Oh man, I think you are on to something. Thank you so much for your help. I may be a total newb... but when I implement it, the output looks the same (the rows are all still stacked and not side by side). An I doing something worng in the implementation?:
<html><head><meta><title>Table test</title><script language="JavaScript"><!--function reformatTable()	{		var t = document.getElementById("mytable");		var oldCells = t.getElementsByTagName("td");		var cellValues = new Array();		for (var i = 0; i < oldCells.length; i++)			cellValues[i] = oldCells[i].firstChild.nodeValue;						for (var i = t.rows.length-1; i >= 0; i--)			t.deleteRow(i);					var newRow = t.insertRow(0);				for (var i = 0; i < cellValues.length; i++)		{			var newCell = newRow.insertCell(i);			newCell.appendChild(document.createTextNode(cellValues[i]));		}	}//--></script></head><body><table id="mytable">  <tr>	<td>one</td>  </tr>  <tr>	<td>two</td>  </tr>  <tr>	<td>three</td>  </tr></table></body></html>

And lastly, the table that's being auto-generated is old legacy code... I may be unable to add an ID to the table. However, I know I'll be able to wrap the table in a DIV. So I'm wondering if there's a way to instead of giving the table an id, that I could wrap the table with <DIV id="mytable"> and the javascript affects any table inside that DIV (there will always be just one table) .

Link to comment
Share on other sites

Oh man, I think you are on to something. Thank you so much for your help. I may be a total newb... but when I implement it, the output looks the same (the rows are all still stacked and not side by side). An I doing something worng in the implementation?: [...]
Having added that function, I think all you need now is to add the line of script to execute the function:
reformatTable();

[...]And lastly, the table that's being auto-generated is old legacy code... I may be unable to add an ID to the table. However, I know I'll be able to wrap the table in a DIV. So I'm wondering if there's a way to instead of giving the table an id, that I could wrap the table with <DIV id="mytable"> and the javascript affects any table inside that DIV (there will always be just one table) .
Yes, you should be able to get at the table one way or another within the document, as long as you know the rules for finding it amongst the elements.
Link to comment
Share on other sites

Having added that function, I think all you need now is to add the line of script to execute the function:
reformatTable();

Yes, you should be able to get at the table one way or another within the document, as long as you know the rules for finding it amongst the elements.

Got it. I'll try to figure out how to execute the function "reformatTable();" -- I don't know anything about javascript but if I google around I may be able to figure it out.Thanks!
Link to comment
Share on other sites

Got it. I'll try to figure out how to execute the function "reformatTable();" -- I don't know anything about javascript but if I google around I may be able to figure it out.Thanks!
To execute the function, you can just add another script block after the table definition:
<table id="mytable">  <tr>	<td>one</td>  </tr>  <tr>	<td>two</td>  </tr>  <tr>	<td>three</td>  </tr></table><script type="text/javascript">   reformatTable();</script>

(Note the reason for not just adding it to the bottom of the existing script block: that script block precedes the table definition so the table would not yet exist.)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...