<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<script type="text/javascript">
function table_create()
{
n=document.f.uname.value;
d=document.f.udes.value;
dep=document.f.udep.value;
s=document.f.usal.value;
var table = document.getElementById('empTable');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML=n;
var cell2 = row.insertCell(1);
cell2.innerHTML = d
var cell3 = row.insertCell(2);
cell3.innerHTML=dep;
var cell4 = row.insertCell(3);
cell4.innerHTML=s;
}
function clear1()
{
document.f.uname.value=" ";
document.f.udes.value=" ";
document.f.udep.value= " ";
document.f.usal.value=" ";
}
function change_theme(msg)
{
if(msg==1)
{
document.getElementById('empTable').style.color="red";
document.getElementById('empTable').style.background="cyan";
}
if(msg==2)
{
document.getElementById('empTable').style.color="#090988";
document.getElementById('empTable').style.background="#779988";
}
if(msg==3)
{
document.getElementById('empTable').style.color="#990088";
document.getElementById('empTable').style.background="#998800";
}
if(msg==0)
{
document.getElementById('empTable').style.color="black";
document.getElementById('empTable').style.background="white";
}
}
</script>
</head>
<body bgcolor="#bbffaa" >
<marquee ><center><b><font face="comic sans ms">Soft Technologies Ltd</font></center></b></marquee><br><br>
<form name="f" >
<table border="0">
<tr> <td>Name : </td> <td><input type="text" id="uname" size="20"> </td> </tr>
<tr> <td>Designation : </td> <td><input type="text" id="udes" size="20" > </td> </tr>
<tr> <td>Department : </td> <td> <input type="text" id="udep" size="20" > </td> </tr>
<tr> <td>Salary : </td> <td><input type="text" id="usal" size="20" > </td> </tr>
<tr> <td><input type="button" onclick="table_create()" value="Update" size="20" > </td>
<td><input type="button" onclick="clear1()" value="Clear" size="20" > </td> </tr>
</table>
</form>
<center><b><font face="comic sans ms" >Employee Details</font></b></center>
<table id="empTable" border="2" align="center" >
<tr>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th></tr>
</tr>
</table>
Styles : <br>
<form name="form2" >
<input type="radio" name="st" size="20" value="1" onclick="change_theme(this.value)"> Theme1<br>
<input type="radio" name="st" size="20" value="2" onclick="change_theme(this.value)"> Theme2<br>
<input type="radio" name="st" size="20" value="3"onclick="change_theme(this.value)"> Theme3<br>
</form>
</body>
</HTML>