Hey guys, another part of program I am stuck at is to create an email storage / reference system. I need the first line to hold the basic info, from to address etc and then a second row to store the message and any comments in a text box. The problem I am having is that I put the two into different tables so when a new line is added it adds to both them. Is it possible to do this e.g to have on the second add to append it to the bottom table?
I To | | From | | Date | | Subject |
| Message | | onClick() |
Which would go to
I To | | From | | Date | | Subject |
| Message |
I To | | From | | Date | | Subject |
| Message | | onClick() |
And so on. Here is the code i have so far ....
[HTML]<html>
<head>
<script type="text/javascript">
function removeRowFromTable()
{
var tbl = document.getElementById('myTable');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
var tbl1 = document.getElementById('myTable1');
var lastRow1 = tbl1.rows.length;
if (lastRow1 > 2) tbl1.deleteRow(lastRow1 - 1);
}
</script>
<script type="text/javascript">
function doThis()
{
var myTab = document.getElementById('myTable');
var row=myTab.rows.length;
var y=myTab.insertRow(row);
var a=y.insertCell(0);
var xx= document.createElement('input');
xx.type="text";
xx.name="EmailFrom[]";
a.appendChild(xx);
var b=y.insertCell(1);
var xx= document.createElement('input');
xx.type="text";
xx.name="EmailTo[]";
b.appendChild(xx);
var c=y.insertCell(2);
var xx= document.createElement('input');
xx.type="text";
xx.name="EmailDate[]";
c.appendChild(xx);
var d=y.insertCell(3);
var xx= document.createElement('input');
xx.type="text";
xx.name="EmailSubject[]";
d.appendChild(xx);
var myTab1 = document.getElementById('myTable1');
var row1=myTab1.rows.length;
var z=myTab1.insertRow(row1);
var e=z.insertCell(0);
var xx= document.createElement('textarea');
xx.col="200"
xx.rows="5"
xx.name="Message[]";
e.appendChild(xx);
}
</script>
</head>
<body>
<br/>
<input type="button" value="Add" onclick="doThis()">
<input type="button" value="Remove" onClick="removeRowFromTable()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>From</th>
<th>To</th>
<th>Date</th>
<th>Subject</th>
</tr>
<table id="myTable1" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Message</th>
</tr>
</table>
</table>
</body>
</html>[/HTML]
Any help much appreciated
A trickier HTML Form create new table(s) 
