I messed it up, so my code does not generate the headers. and does no calculation.
<head>
<title></title>
<script type="text/javascript">
var x = document.getElementById("tblDemo");
x.style.border = "solid";
x.style.borderColor = "#FFFFCC";
x.style.backgroundColor = "#CCFFCC";
var row = x.insertRow();
row.style.width = "200px";
row.style.border = "solid";
row.style.borderColor = "gray";
var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Amount";
var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Period";
var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "Rate";
var cell = row.insertCell();
cell.style.width = "300px";
cell.style.textAligh = "";
cell.style.border = "solid";
cell.style.borderColor = "#00CC99";
cell.innerHTML = "New Amount";
var principle = document.forms["Myform"]["principle"].value
var period = document.forms["Myform"]["period"].value
var rate = document.forms["Myform"]["rate"].value
}
function calculate () {
newamount = principle * ((rate / 100) + 1)
}
</script>
</head>
<body>
<table id="tblDemo">
</table>
<form name="Myform" action="">
<fieldset>
<input type="text" name="principle" />
<input type="text" name="period" />
<input type="text" name="rate" />
<input type="button" value="Create Table" />
</fieldset>
<fieldset>
<input type="button" id="calculate" value="Calculation"
onclick="createRow ()" />
</fieldset>
</form>
</body>