<h3 id = "UpdateEmpyeeCaption">Update Employee Table</h3>
        <table id = "UpdateEmployeeTable" >

            <thead id ="UpdateTableHeadders" >
                <tr>
                    <th class = "UpHeaderCell">EmployeeID </th>
                    <th class = "UpHeaderCell">Firstname </th>
                    <th class = "UpHeaderCell">Lastname </th>
                    <th class = "UpHeaderCell">Username </th>
                    <th class = "UpHeaderCell">Password </th>
                    <th class = "UpHeaderCell">Lifeguard </th>
                    <th class = "UpHeaderCell">Instructor </th>
                    <th class = "UpHeaderCell">Headguard </th>
                    <th class = "UpHeaderCell">Supervisor </th>
                </tr>
            </thead>


            <tbody id = "UpdateEmployeeTableinner">

            </tbody>

        </table>

function loadTable(  employeelist   )
    {
        var MSG = "";
        EmployeeList = employeelist;

        for( var emp in  employeelist   )
        {
            var id = employeelist[emp]["employeeID"];
            var firstname = employeelist[emp]["Firstname"];
            var lastname = employeelist[emp]["Lastname"];
            var username = employeelist[emp]["Username"];
            var Password = employeelist[emp]["Password"];
            var lifeguard = "";
                if (  employeelist[emp]["Lifeguard"] == true ){ lifeguard = "Yes"; }else{ lifeguard = "no"; }
            var instructor = "";
                if (  employeelist[emp]["Instructor"] == true ){ instructor = "Yes"; }else{ instructor = "no"; }
            var headguard = "";
                if (  employeelist[emp]["Headguard"] == true ){ headguard = "Yes"; }else{ headguard = "no"; }
            var supervisor = "";
                if (  employeelist[emp]["Supervisor"] == true ){ supervisor = "Yes"; }else{ supervisor = "no"; }


            MSG += "<tr class = "UpdateEmployeeCell notHoverTable">";
                MSG += "<td class ="upEmCell"> "+id+"   </td>";
                MSG += "<td class ="upEmCell"> "+firstname+"   </td>";
                MSG += "<td class ="upEmCell"> "+lastname+"  </td>";
                MSG += "<td class ="upEmCell"> "+username+"   </td>";
                MSG += "<td class ="upEmCell"> "+Password+"    </td>";
                MSG += "<td class ="upEmCell"> "+lifeguard+"  </td>";
                MSG += "<td class ="upEmCell"> "+instructor+"   </td>";
                MSG += "<td class ="upEmCell"> "+headguard+"   </td>";
                MSG += "<td class ="upEmCell"> "+supervisor+"   </td>";
            MSG += "</tr>";
        }//End of for each employee in employeelist

        //Put the rows into tbody of the table.
        $('#UpdateEmployeeTableinner').empty();
        $('#UpdateEmployeeTableinner').append( MSG );

    }/* End of Function loadTable */

/* Start of Update Employee Table*/
        /*table*/
        #UpdateEmployeeTable {
            border: 3px solid black;
            margin: 0;
            padding: 0 0 0 0;
            overflow:hidden;
            display: block;
        }
        /*thead*/
        #UpdateTableHeadders {
            background: rgb(221,221, 221);
            display: block;
            padding: 0em 1em 0em 1em;/* top right bottom left*/
            margin: 0; /*margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>*/
            border-bottom: 3px solid black;

        }
        /*th*/
        .UpHeaderCell {
            display: inline;
            border: 1px solid black;
            width: 11%;
        }
        /*tbody*/
        #UpdateEmployeeTableinner {
            border: 1px solid black;
            background: white;
            overflow: auto;
            height: 25vh;
            display: block;
        }
        /*tr inside tbody*/
        .UpdateEmployeeCell {
            border: 1px solid black;
            margin:  0.5em 0.2em 0.5em 0.2em ; /*top right  bottom left*/
            display: block;
            overflow: hidden;
            padding: 0.1em;
        }
        /*td*/
        .upEmCell {
            display: inline-block;
            border: 1px solid black;
        }
        /*When a table row does not have mouse hover*/
        .notHoverTable {
            background-color: rgb(4,211,255);
            color: black;
            border: 2px solid black;
        }
        /*When a table row does have mouse hover*/
        .liOVERTable {
            background-color: rgb(5, 255, 12);
            border: 2px solid black;
            color: black;
            cursor: pointer;
            cursor: hand;
        }
    /* End of Update Employee Table*/