Below is the full code for an array table that I'm using to enter/store/sort/display a list of payments. It has been designed for best use with IE6 (it is not needed for any other browsers).
When all payments are entered, the user can then select the button to create a word doc with all the enterred payment details displayed.
The table itself works fine. The entire thing works well, bar 2 issues.
My main issue is with the spacing of the entries in the output doc. I can't use tabs as some of the individual entries are longer than others. I've found a function called addLength() which I'm trying to adapt to space out the items depending on pixel width of the characters (based on a separate array of character pixel lengths). I can't seem to get it to format correctly.
bascially, what I want is that whatever the length of the entries in the table, in the word doc, each field will line up. I'd also love for someone to explain exactly how addLength works, as I'm still learning.
Secondly, when the reset button is selected, how can I reset the paymentTable so that prev enterred items are removed. Press create doc button and select OK to reset and see what I mean.
I hope I've made sense.
Code:
<html>
<head>
<title>Payment Array Test</title>
<style type="text/css">
body {font-size: x-small; margin: 2px; color: #000000; font-family: verdana; background-color: #ffffff}
table {font-size: x-small}
h1 {font-weight: bold; font-size: medium; margin-bottom: 5px; font-family: verdana, arial, sans-serif}
h2 {font-weight: bold; font-size: small; margin-bottom: 4px; font-family: verdana, arial, sans-serif}
h3 {font-weight: bold; font-size: 11pt; margin-bottom: 3px; font-family: verdana, arial, sans-serif}
p {font-size: 10pt; color: black; font-family: verdana, arial, sans-serif}
a:link {color: #0000ff; font-family: verdana, arial, sans-serif}
a:visited {color: #800080; font-family: verdana, arial, sans-serif}
a:hover {color: #800080; font-family: verdana, arial, sans-serif; text-decoration: underline}
hr {color: #999999; height: 1px}
td {vertical-align: top; text-align: left; padding-right: 5px; padding-left: 5px; padding-bottom: 1px; padding-top: 1px; border-right: #FFFFFF 1px solid;}
</style>
<script language="VBScript">
Function VBvalidateDates(VBwhichDate)
VBvalidateDates = isdate(VBwhichDate)
End Function
</script>
<script language="Javascript">
var prevLastChar = ""
//array below holds the width in pixels of characters in the alphabet and a few other characters
var letterArray = new Array()
letterArray['A'] = 11
letterArray['B'] = 11
letterArray['C'] = 11
letterArray['D'] = 12
letterArray['E'] = 11
letterArray['F'] = 10
letterArray['G'] = 13
letterArray['H'] = 12
letterArray['I'] = 5
letterArray['J'] = 8
letterArray['K'] = 10
letterArray['L'] = 9
letterArray['M'] = 13
letterArray['N'] = 11
letterArray['O'] = 12
letterArray['P'] = 10
letterArray['Q'] = 12
letterArray['R'] = 12
letterArray['S'] = 11
letterArray['T'] = 9
letterArray['U'] = 12
letterArray['V'] = 11
letterArray['W'] = 14
letterArray['X'] = 11
letterArray['Y'] = 11
letterArray['Z'] = 10
letterArray['a'] = 9
letterArray['b'] = 9
letterArray['c'] = 8
letterArray['d'] = 9
letterArray['e'] = 9
letterArray['f'] = 5
letterArray['g'] = 9
letterArray['h'] = 9
letterArray['i'] = 3
letterArray['j'] = 3
letterArray['k'] = 8
letterArray['l'] = 3
letterArray['m'] = 13
letterArray['n'] = 9
letterArray['o'] = 9
letterArray['p'] = 9
letterArray['q'] = 9
letterArray['r'] = 5
letterArray['s'] = 8
letterArray['t'] = 5
letterArray['u'] = 9
letterArray['v'] = 7
letterArray['w'] = 11
letterArray['x'] = 7
letterArray['y'] = 7
letterArray['z'] = 8
letterArray['1'] = 9
letterArray['2'] = 9
letterArray['3'] = 9
letterArray['4'] = 9
letterArray['5'] = 9
letterArray['6'] = 9
letterArray['7'] = 9
letterArray['8'] = 9
letterArray['9'] = 9
letterArray['0'] = 9
letterArray['sl'] = 4
letterArray['sp'] = 4
letterArray['fs'] = 4
//payment array holds details of all the payments entered
paymentArray = new Array(40)
for (i=0;i<paymentArray.length;i++)
paymentArray[i] = new Array(6)
function doPaymentTable(action)
//adds/deletes payments to/from the payment list
{
notAllNull = false
tableSrc = "<br><table cellpadding=2 cellspacing=0 border=1 style='color:black;background-color:white;width:650;'>"
tableSrc += "<tr>"
tableSrc += "<td rowspan=2 id=pCellTL align=center>Payment Date</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=67>Amount</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=95>Paid to</td>"
tableSrc += "<td rowspan=2 id=pCellT align=center width=100>Payment Type</td>"
tableSrc += "<td colspan=2 id=pCellT align=center>Payment Period</td>"
tableSrc += "</tr>"
tableSrc += "<tr>"
tableSrc += "<td align=center id=pCell width=72>From</td>"
tableSrc += "<td align=center id=Pcell width=72>To</td>"
tableSrc += "</tr>"
if (action == "add")
{
if (VBvalidateDates(document.all.paymentDate.value))
{
for (i=0;i<40;i++)
{
if (paymentArray[i][0] == null)
{
if (document.all.paymentDate.value != "")
{
paymentArray[i][0] = document.all.paymentDate.value
paymentArray[i][1] = document.all.amount.value
paymentArray[i][2] = document.all.recipient.value
paymentArray[i][3] = document.all.method[document.all.method.selectedIndex].value
paymentArray[i][4] = document.all.periodFrom.value
paymentArray[i][5] = document.all.periodTo.value
document.all.paymentDate.value = ""
document.all.periodFrom.value = ""
document.all.periodTo.value = ""
}
}
}
}
else
alert("Please Enter a valid date.")
}
else
{
for (i=0;i<document.all.payments.length;i++)
{
if (document.all.payments[i].checked)
{
paymentArray[i-1][0] = null
paymentArray[i-1][1] = null
paymentArray[i-1][2] = null
paymentArray[i-1][3] = null
paymentArray[i-1][4] = null
paymentArray[i-1][5] = null
}
}
sortArray(paymentArray)
}
for (i=0;i<40;i++)
{
if (paymentArray[i][0] != null)
{
tableSrc += "<tr><td id=pCellL><input type=radio name=payments off style='color:black;'> " + paymentArray[i][0] + "</td>"
tableSrc += "<td id=pCell>$" + paymentArray[i][1] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][2] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][3] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][4] + "</td>"
tableSrc += "<td id=pCell>" + paymentArray[i][5] + "</td>"
notAllNull = true
}
}
if (notAllNull)
{
tableSrc += "</table>"
tableSrc += "<br><center style='margin-left:5px;'><input type=button value='Delete selected payment from list' onclick=javascript:doPaymentTable('delete')></center>"
document.all.paymentTable.innerHTML = tableSrc
}
else
document.all.paymentTable.innerHTML = ""
document.all.paymentDate.focus()
}
function sortArray(whichArray)
//called from doPaymentsTable, sorts the paymentArray
{
for (x=0;x<whichArray.length-1;x++)
{
for (y=x+1;y<whichArray.length;y++)
{
if (whichArray[x][0]==null && whichArray[y][0]!=null)
{
tempVar = whichArray[y]
whichArray[y] = whichArray[x]
whichArray[x] = tempVar
}
}
}
}
function addLength()
//called from buildDocument, cycles through payment array and spaces out fields so they line up when pasted into Word
{
for (x=0;x<40;x++)
{
if (paymentArray[x][0]!=null)
{
strWidth = 0
tempStr = paymentArray[x][1]
for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth += 4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}
for (i=strWidth;i<72;i++)
{
paymentArray[x][1] += " "
i = i + 8
strWidth += 4
}
strWidth = 0
tempStr = paymentArray[x][2]
for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth += 4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}
for (i=strWidth;i<120;i++)
{
paymentArray[x][2] += " "
i = i + 6
strWidth += 4
}
strWidth = 0
tempStr = paymentArray[x][3]
for (i=0;i<tempStr.length;i++)
{
if (tempStr.charAt(i) == "/" || tempStr.charAt(i) == " " || tempStr.charAt(i) == ".")
{
strWidth +=4
}
else
{
strWidth += eval("letterArray['" + tempStr.charAt(i) + "']")
}
}
for (i=strWidth;i<100;i++)
{
paymentArray[x][3] += " "
i = i + 6
strWidth += 4
}
}
}
}
function buildDocument()
//called from validateFields, produces the document for Word
{
addLength()
strDocument = "=Payment Details================================================\n"
if (paymentArray[0][0] != null)
{
strDocument += "Date\t Amount Recipient Type\t\t From\t To\n"
for (i=0;i<40;i++)
{
if (paymentArray[i][0] != null)
{
strDocument += "" + paymentArray[i][0] + " $" + paymentArray[i][1] + " " + paymentArray[i][2] + " "
strDocument += paymentArray[i][3] + "" + paymentArray[i][4] + "-" + paymentArray[i][5] + "\n"
}
}
}
else
strDocument += " No payments.\n"
document.all.txtaDocument.value += strDocument
document.all.txtaDocument.select()
txttoCopy = document.all.txtaDocument.createTextRange()
txttoCopy.execCommand("copy")
alert("Document has been copied and can now be pasted into Word.")
document.all.txtaDoc.innerHTML = "<input type=button value='Create document' onclick='javascript:validateFields();'><textarea style='width:585;font-family:MS Sans Serif;font-size:12pt;display:none;' rows=18 name=txtaDocument></textarea>"
resetq = confirm("Click OK to clear the form.")
if (resetq)
document.forms["form"].reset()
scroll(0,0)
}
function validateFields()
//validates all specified fields
{
errorMsg = "One or more required fields have not been completed or contain invalid data."
var valid = true
var nopaymentsok = true
if (paymentArray[0][0] == null)
{
nopaymentsok = confirm("You have not entered any payments, continue?")
}
if (!valid)
alert(errorMsg)
else
{
if (nopaymentsok)
buildDocument()
}
}
function dateField(whichField)
//adds "/" at appropriate points in dates
{
dateStr = whichField.value
if (prevLastChar != "/")
if (dateStr.length == 2 || dateStr.length == 5)
dateStr += "/"
if (prevLastChar == "/" && dateStr.length < prevLength)
dateStr = dateStr.substr(0,dateStr.length-1)
whichField.value = dateStr
prevLastChar = dateStr.charAt(dateStr.length-1)
prevLength = dateStr.length
if (dateStr.length == 10) whichField.select()
}
function inputMask(e,charsAllowed)
//validates textbox input against allowed characters
{
if (charsAllowed.indexOf(String.fromCharCode(e.keyCode)) == -1)
return false
}
</script>
</head>
<body>
<!-- Create input webform -->
<form name=form style='width:650;'>
<hr align=left color=#000000>
<p>Enter details of each relevant payment(s) and click the "Add payments to list" button.</p>
<table cellpadding=0 cellspacing=0 border=1 bgcolor=#fff585 style='width:650;border:1px solid #999999;'>
<tr>
<td rowspan=2 align=center><font color=black>Payment Date</font></td>
<td rowspan=2 align=center><font color=black>Amount</font></td>
<td rowspan=2 align=center><font color=black>Paid to</font></td>
<td rowspan=2 align=center><font color=black>Payment Type</font></td>
<td colspan=2 align=center><font color=black>Payment Period</font></td>
</tr>
<tr>
<td align=center><font color=black>From</font></td>
<td align=center><font color=black>To</font></td>
</tr>
<tr>
<td><input type=text name=paymentDate style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.paymentDate) onkeypress='javascript:return inputMask(event,"1234567890")'></td>
<td><font color=black>$</font><input type=text name=amount style='width:60;' maxlength=8 onkeypress='javascript:return inputMask(event,"1234567890.")'></td>
<td><input type=text name=recipient style='width:100;' maxlength=15></td>
<td>
<select name=method>
<option value="Direct Payment ">Direct Payment</option>
<option value="Non-cash payment ">Non-cash payment</option>
<option value="Vehicle costs ">Vehicle costs</option>
<option value="Pre/School fees ">School fees</option>
<option value="Pre/School supplies ">School supplies</option>
<option value="Other ">Other</option>
</select>
</td>
<td><input type=text name=periodFrom style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.periodFrom) onkeypress='javascript:return inputMask(event,"1234567890")'></td>
<td><input type=text name=periodTo style='width:85;' maxlength=10 value='dd/mm/yyyy' onfocus='javascript:if (this.value=="dd/mm/yyyy") this.value=""' onkeyup=dateField(document.all.periodTo) onkeypress='javascript:return inputMask(event,"1234567890")'></td></tr>
<tr><td align=center colspan=6>
<center><input type=button name=addPaymentBut value="Add payment to list" onclick=javascript:doPaymentTable("add")></center>
<input type=hidden name=payments></td></tr>
</table>
<div id=paymentTable style='width:650px;'> </div>
</form>
<hr align=left style='width:650px;' color=#000000><br>
<div style='width:500px' id=txtaDoc align=center><input type=button value='Create document' onclick='javascript:validateFields();'>
<textarea style='width:585;font-family:MS Sans Serif;font-size:12pt;display:none;' rows=18 name=txtaDocument></textarea></div>
</body>
<script language="Javascript">
if (document.body.offsetWidth < 552)
{
window.moveTo(0,0)
window.resizeTo(560,screen.height-27)
}
</script>
</html>
You know, if you'd just make the FONT for the .doc file be COURIER or COURIER NEW, then you wouln't have to worry about character widths. All characters would be same width.
For ANY kind of accounting report, surely this would be much more appropriate!
Even as it is, your character widths table will ONLY be valid for ONE PARTICULAR FONT! So how do you ensure that the HTML and the word doc are using *that* font??
But there *is* another way, you know:
Produce a <TABLE> in HTML, with all the numbers aligned on the right side of each <TD> cell, and now it WILL line up. Regardless of the font used.
OH! I see! You are dumping the doc out to the clipboard. Ugh. No wonder you have problems.
Why not just pop it up in a new window, with the font and/or <table> so it's formatted properly, and let them copy/paste it from there?
var w = window.open("junk.doc","JUNK");
w.document.write("<html><body style='font-family: courier new;'>DOC:<pre>" + strDocument + "</pre></body></html>");
And indeed a window popped up that I could then copy/paste the entire contents of into WORD and it was formatted correctly. Well, almost. I didn't correct your spacing.
Again, though, this would be even easier if you'd just produce a <TABLE> in HTML. Then Word would align things no matter what.
Why not just take the table you already have and alter it slightly??
Thanks for the reply. I understand what you are saying, but I am limited with options. Basically, even though I have posted code with the end result being a word doc, in actual usage, the output will be copied as a note into a proprietary program that will not recognise tables or html, it will only recognise basic formatting (tabs, spaces, carriage returns etc), hence all the messing around. The notes also have size restriction of 3900 characters (including spaces) so I need to keep it compact.
I know the addLength function is one answer, I just need to crack the code fully to understand it. Any ideas?
Well, is there ANY possibility of ensuring that the importing program will use a fixed-width font? That is, Courier or similar??
As I said, all that gobbledy-gook with addLength() is only there for some specific proportional font. Heck, it won't even work if the font used by the proprietry program is different than whatever font the table was created for.
Fixed width font is actually reasonably easy, just using padding with spaces.
Yeah, it's designed for use on IE6. Never tested it on Mozilla or any others as I don't need to.
For the system I'm working on, the standard is Verdana 9pt, which I understand differs from any other font and should never be used for web. I'll play around with others, courier most likely and see what I can do, I'll just have to try and get the "bosses" to accept that is how it is.
Definitely won't work on anything but IE, since it uses a VBScript function. Could be re-written to use JS only, but why bother if it's only for use in this purpose.
Hey, any idea on my other issue with resetting. Using the resetq function it resets the form only. How can I get it to reset the paymentTable back to default as well?
using innerHTML clears the table entries from the form, but the entries are retained in the array, so that when a new entry is added to the table, both the new and old entries appear. Any ideas?
Just a quick note to say thanks for the help, I have resolved this issue. I just wrote a quick function to declare the array each time and call it whenever the form is reset. It may not be pretty, but it works exactly as I need it.
Code:
function cleartable()
{
if (resetq)
{
document.all.paymentTable.innerHTML=""
paymentArray = new Array(40)
for (i=0;i<paymentArray.length;i++)
paymentArray[i] = new Array(6)
}
}
Before you post, read our: 
