emp_database adding row

by PRAGADEESH S

HTML

<title> Employee Database</title>
<body>
  <header>
    <h3>
EMPLOYEE DATABASE
	</h3>
  </header>
	<div class="grid">
			<table id ="table"></table>
		</div>
		<div class="buttons">
		
		<br><br><input type="button" onclick="hide()" value="Hide/Show"><br><br>
		</div>
<div id="hide">
		<div class="forms">
			<form action="#" method="get">

				Enter Your Id
				<br>
				<input type="text" id="id" name="Id">
				<br> Enter Your Name
				<br>
				<input type="text" id="name" name="Name">
				<br> Enter Your Dept
				<br>
				<input type="text" id="dept" name="Dept">
				<br> Enter Your Package
				<br>
				<input type="text" id="package" name="Package">
				<br>
				<br>
				<div class="buttons">
					<input type="button" value="Click To Add" onclick="addRow()">
				</div>

			</form>
		</div>
  
</div>
	
	<script type="text/javascript">
				
            
				var data = [];
                
                var ids = document.getElementById("id");
                var names = document.getElementById("name");
                var depts = document.getElementById("dept");
                var packagess = document.getElementById("package");
				
				var html = "<tr><th>Id</th><th>Name</th><th>Dept</th><th>Package</th></tr>";
				//html += "<tr><td>"+data[0]+"</td><td>"+data[1]+"</td><td>"+data[2]+"</td><td>"+data[3]+"</td></tr>";
				document.getElementById("table").innerHTML = html;
				
				function addRow(){
					data.push(ids.value,names.value,depts.value,packagess.value);
					ids.value="";
					names.value="";
					depts.value="";
					packagess.value="";
					html += "<tr><td>"+data[0]+"</td><td>"+data[1]+"</td><td>"+data[2]+"</td><td>"+data[3]+"</td></tr>";
					document.getElementById("table").innerHTML = html;
				}    
							function hide() {
								var x = document.getElementById('hide');
								if (x.style.display === 'none') {
								x.style.display = 'block';
								} else {
								x.style.display =...

CSS

body{
   background-color:#6699ff;
}
header{
  background-color:white;
}
h3 {
  text-align: center;
  
}

table,
th,
td {
  background-color:white;
  border: 1px solid black;
  border-collapse: collapse;
  width: 50%;
  margin: auto;
  padding: 15px;
  text-align: left;
}
.grid{
	float:left;
	
}


input[type=text] {

  width: auto;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}
input[type=button]
 {
    background-color: grey; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.forms{
	float:left;
}