Formatting text using Javascript (need table with headers)

[gdrenfrew]

Hi there,

I'm doing a completely messy hack of an HTML table. I want to copy the contents of the table into the clipboard so users can easily paste the data into an email.

Currently I can get all the data out, but I need the headers to line up with the fields of data. Sometimes fields are long, sometimes short, so doing it by tab is a bit fiddly.

Is there an easy way to format data nicely (so it looks like a neat table) in javascript?


I want it to look like this:
Ref., Commodity, Commission, USD
19292 Tin 1/12 4000
93838 Aluminium Al 3/30 30300003
93923 Copper 1/12 1029

Currently, I can't get the headers to line up about the columns, and it looks like this (there a more columns which makes it look even worse, this is just for illustrative purposeS):

Ref.,Commodity,Commission,USD
19292 Tin 1/12 4000
93838 Aluminium Al 3/30 30300003
93923 Copper 1/12 1029

This is my code at present (this shows all the columns I want to use):

function HTMLToClipboard()
{
//copy the contents of the html page into the clipboard so the
//data can be pasted into Excel or an email
var output = new String();
FillCount = document.all.tdRef.length

var Ref = new String();
var TimeFilled = new String();
var PlacedBy = new String();
var Commodity = new String();
var Account = new String();
var Quantity = new String();
var Currency = new String();
var Direction = new String();
var Commission = new String();
var Price = new String();
var USDPrice = new String();
var Prompt = new String();

var nRef = new Array();
var nFillData = new Array();

//populate the array
nRef = document.all('tdRef')
nTimeFilled = document.all('tdTimeFilled')
nPlacedBy = document.all('tdPlacedBy')
nCommodity = document.all('tdCommodity')
nAccount = document.all('tdAccount')
nQuantity = document.all('tdQuantity')
nCurrency = document.all('tdCurrency')
nDirection = document.all('tdDirection')
nCommission = document.all('tdCommission')
nPrice = document.all('tdPrice')
nUSDPrice = document.all('tdUSDPrice')
nPrompt = document.all('tdPromptDate')



for (x=0;x<FillCount;x++)
{


Ref = nRef[x].innerText
TimeFilled = nTimeFilled[x].innerText
PlacedBy = nPlacedBy[x].innerText
Commodity = nCommodity[x].innerText
Account = nAccount[x].innerText
Quantity = nQuantity[x].innerText
Currency = nCurrency[x].innerText
Direction = nDirection[x].innerText
Commission = nCommission[x].innerText
Price = nPrice[x].innerText
USDPrice = nUSDPrice[x].innerText
Prompt = nPrompt[x].innerText

//take a new line
output = output + Ref + ",\t" + TimeFilled + ",\t" + PlacedBy + ",\t" + Commodity + ",\t" + Account + ",\t" + Quantity + ",\t" + Currency + ",\t" + Direction + ",\t" + Commission + ",\t" + Price + ",\t" + USDPrice + ",\t" + Prompt + "\n"
}

// put in the headers
output = "Ref" + ", FillTime" + ", Placed By" + ", Commodity" + ", Account" + ", Quantity" + ", Currency" + ", Direction" + ", Commission" + ", Price" + ", USD Price" + ", Prompt Date" + "\n\n" + output

//copy to clipboard
clipboardData.clearData();
clipboardData.setData('Text', output);

alert("Data has been copied to clipboard.\n")
}

If anyone can suggest how best to format text in javascript so it can be neatly pasted I would be VV grateful.

thanks!
graeme

 

[vongrunt]

For each column find a maximum length, then pad each value from this column to the right with spaces.

Btw. with few simple tricks you can also shrink code size to perhaps 1/3 of the original.

 

[gdrenfrew]

Thanks vg
I'll give that a go.

Can you suggest the tricks? Always happy to learn new stuff!

thanks

 

[vongrunt]

OK... here is testing code:

<table border="1" id="myTable">
<tr>
	<th>Ref</th>
	<th>FillTime</th>
	<th>Placed By</th>
	<th>Commodity</th>
</tr>	
<tr>
	<td>Ref #1 (longer)</td>
	<td>12:20:23</td>
	<td>John Doe</td>
	<td>C #1</td>
</tr>
<tr>
	<td>Ref #2</td>
	<td>15:04:45</td>
	<td>Dikembe Mutombo Mpolondo Mukamba Jean Jacque Wamutombo</td>
	<td>C #2</td>
</tr>
</table>		
<input type="button" onclick="document.getElementById('testing_area').innerText = formatTableData('myTable');" value="Test">

<pre id="testing_area" style="background-color: #9cb0c0;">
(formatted results here...)
</pre>

... and this is function. Input argument is table Id, output value is formatted string:

<script language="javascript">
function formatTableData( sTableID )
{	var oRows = document.getElementById( sTableID ).rows;
	var rowCount = oRows.length;
	var colCount = oRows[0].cells.length
	var aLengths = [], aRow = [];
	var output = '';
	
	for( i=0; i< colCount; i++)
	{	for( maxlen=0, j=0; j< oRows.length; j++ )	
			maxlen = Math.max( maxlen, oRows[j].cells[i].innerText.length );
		aLengths.push( maxlen );
		aRow.push( null );
	}
	
	for( i=0; i< rowCount; i++ )
	{	for(j=0; j< colCount; j++)
			aRow[j] = padRight( oRows[i].cells[j].innerText, aLengths[j] );
		output+= aRow.join( ", " ) + "\n";
	}
	
	return output;
}

function padRight( sStr, iLen )
{	while( sStr.length < iLen) sStr+= " ";
	return sStr;
}
</script>

 

[gdrenfrew]

Thanks for this great code snippet. I have modified it and it works fine. Thank you. I was heading down this route anyway, but this code is much more compact than I could have managed.

Erk, but wouldn't you know that when you paste nicely formatted plain text into an Outlook message, it gets screwed right up into Rich Text formatting. Gaaah!!!

 

[gdrenfrew]

Bah, have to replace all the padding spaces with Tabs I think. I thought maybe using "\s" in place of a space would work. Is this the correct escape character, like \t and \n?

 

[vongrunt]

AFAIK no.

Can you simply change font to fixed (courier, lucida console, whatever) before paste?