Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
table{
    border-collapse: collapse;
}
td,th{
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
}

.content{
    max-width: 600px;
    margin: 0 auto;
}

#empForm{
    background: #dae5f4;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
}
#emp{
    display: none;
    width: 100%;
    text-align: center;
}
#emp tr:nth-child(odd){
    background-color: #b8d1f3;
}
#emp tr:nth-child(even){
    background-color: #dae5f4;
}
</style>
</head>
<body>
<div class="content">
    <form id="empForm" action="#">
    <p>
        <label for="eid">Employee ID</label>
        <br />
        <input type="text" id="eid" />
    </p>
    <p>
        <label for="ename">Name</label>
        <br />
        <input type="text" id=ename />
    </p>
    <p>
        <label for="esal">Salary</label>
        <br />
        <input type="text" id=esal />
    </p>
    <p>
        <input type="submit" value="Prepend" />
    </p>
    </form>
    <table id="emp">
        <tr>
            <th>empid</th>
            <th>empname</th>
            <th>empsal</th>
        </tr>
    </table>
</div>
<script src="jquery.js"></script>
<script>
var hidden = 1;
(function($){
    $(document).ready(function(){
        $("#empForm").submit(function(e){
            e.preventDefault();
            var id, nm, sal, table;
            id = $("#eid");
            nm = $("#ename");
            sal = $("#esal");
            if(id.val().length<=0 || nm.val().length<=0 || sal.val().length<=0)
                return;
            table = $("#emp tr:first");
            var str = "<tr><td>"+id.val()+"</td><td>"+nm.val()+"</td><td>"+sal.val()+"</td></tr>";
            table.after(str);
            id.val(""),nm.val(""),sal.val("");
            id.focus();
            if(hidden){
                $("#emp").show();
                hidden = 0;
            }
        });
    });
})(jQuery);
</script>
</body>
</html>