form_and_table

by bvotcode

HTML

<div>
        <table id="tblInputs" border="0" style=" width: 500px; border: thick; font-family: Verdana; font-size: medium; background-color: lightblue;">
            <tr>
                <td colspan="2" align="center" >
                    <strong>Employee Details</strong>
                </td>
            </tr>
            <tr>
                <td class="tdStyle">Emp No:</td>
                <td>
                    <input type="text" id="txtEmpNo" />
                </td>
            </tr>
            <tr>
                <td class="tdStyle">Emp name:</td>
                <td>
                    <input type="text" id="txtEmpName" />
                </td>
            </tr>
            <tr>
                <td class="tdStyle">Salary:</td>
                <td>
                    <input type="text" id="txtSalary" />
                </td>
            </tr>
            <tr>
                <td class="tdStyle">Dept No:</td>
                <td>
                    <input type="text" id="txtDeptNo" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input style="background-color:deepskyblue;color:white; font-weight:bold; " type="button" id="btnInsert" value="Insert" />
                
                </td>
            </tr>
        </table>
    </div>
    <div>
        <table id="tblDetails" style=" width:500px; border:thick; font-family:Verdana; font-size:medium; background-color:bisque;" border="1">
            <thead>
                <tr>
                    <th>
                        EmpNo
                    </th>
                    <th>
                        EmpName
                    </th>
                    <th>
                        Salary
                    </th>
                    <th>
                        DeptNo
                    </th>
                </tr>
            </thead>
            <tbody id="tblBody"></tbody>
        </table>
    </div>
    <script...

CSS

<style type="text/css">
        .tdStyle {
            float: right;
        }
    </style>

JavaScript

$("#btnInsert").click(function () {
                var eNo = $("#txtEmpNo").val();
                var eName = $("#txtEmpName").val();
                var sal = $("#txtSalary").val();
                var deptNo = $("#txtDeptNo").val();
                var rowCnt = $("#tblBody tr").size();

                if (eNo === "" && eName === "" && sal === "" && deptNo === "") {
                    alert("Enter values");
                }
                else {
                    if (rowCnt === 0) {
                        $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo +" <input type='button' value='Delete' id='btnDelete"+rowCnt+"'/></td></tr>").appendTo("#tblBody");
                        $("input[id^=txt]").val(""); 
                        $("input[id^=btnDelete]").bind("click", function () {
                        $(this).parent().parent().remove();

                        });

                    }
                    else {
                        var dupCount = 0;
                        for (var i = 0; i < rowCnt; i++) {
                            var num = $("#Items" + i).html().toString();
                            if (eNo == num) {
                                dupCount++;
                            }
                        }
                        if (dupCount === 0) {
                            $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo + " <input type='button' value='Delete' id='btnDelete" + rowCnt + "'/></td></tr>").appendTo("#tblBody");
                            $("input[id^=txt]").val("");
                            $("input[id^=btnDelete]").bind("click", function () {
                             $(this).parent().parent().remove();
                            });
                        }
                        else {
                            alert("Your entered EmpNo is already exists in the table !");
     ...