JQuery

I have used Jquery and Java script to implement the following development..
case : Need to create a table (table already created )  which can dynamically insert Row by Row and edit the row Necessarily .

//---------------------------My CSS: ----------------------------------------------------
.tblTamplate
{
    border-style: ridge;
     width:600px;
     border-width:thin;    
}

.tblRowTamplate
{
        border-style: ridge;
     width: 200px;   
     border-width:thin;    
   
    }      

.tblHeadRowTamplate
{
        border-style: ridge;
     width: 200px;
     height:15px;
     border-width:thin;    
      background-color:Silver;
       font-size:large ;
       color: Blue;
    }
   
     .tblBtnStyler
     {
         width:200px;
         height:20px;
         color:Red;
       
         }

//-------------------------- HTML Coding -------------------------------------------------------------

 <div id="divtbl" style=" border-width:4px;"  >
    <table id="tblEmp" class="tblTamplate"   >
        <tr class="tblHeadRowTamplate" >
            <td  class="tblRowTamplate">
                <p id="btngen"  style="cursor:pointer;"> Start </p>
            </td>
            <td  class="tblRowTamplate">
                Employee Id&nbsp;
            </td>
            <td>
               Employee Name   &nbsp;
            </td>
            <td  class="tblRowTamplate">
                Age&nbsp;
            </td>
        </tr>
       
    </table>
    </div>

//-------------------------- JQuery Code ----------------------------------------------------------------
// with in the ready ()

   $('#btngen').click(function () {

                var tbl = document.getElementById('tblEmp');
                var lastIndex = tbl.rows.length;

                $("#tblEmp tr:last").after("<tr>")
                    .after("<td class='tblRowTamplate'> <input id='Txtc" + lastIndex + "' type='text'  />  </td>")
                    .after("<td class='tblRowTamplate'> <input id='Txtb" + lastIndex + "' type='text'  />  </td>")
                    .after("<td class='tblRowTamplate'> <input id='Txta" + lastIndex + "' type='text'  />  </td>")
                    .after("<td class='tblRowTamplate'> <button id='btn" + lastIndex + "' onclick='return tbBtnClicker(this);' >  Save Data </button> </td>")
                    .after("</tr>");
                    
            });



//----------------------------My JScript ---------------------------------------------------
 function tbBtnClicker(iccd) {           

            var tbl = document.getElementById('tblEmp');
            var lastIndex = tbl.rows.length - 1;


            var idRec = iccd.id + "";
            idRec = idRec.substr(3, idRec.length);


            if (lastIndex === parseInt(idRec)) {

                var tembtn = "btn" + lastIndex;
                var temtxta = "Txta" + lastIndex;
                var temtxtb = "Txtb" + lastIndex;
                var temtxtc = "Txtc" + lastIndex;

                var temtxtaSTR = document.getElementById(temtxta).value.toString();
                var temtxtbSTR = document.getElementById(temtxtb).value.toString();
               var temtxtcSTR=document.getElementById(temtxtc).value.toString();

               if (temtxtaSTR == "") {
                   alert(" Can not be Blank ! ");
                   return false;
               }
               if (temtxtbSTR == "") {
                   alert(" Can not be Blank ! ");
                   return false;
               }
               if (temtxtcSTR == "") {
                   alert(" Can not be Blank ! ");
                   return false;
               }
               
              
                document.getElementById(temtxta).disabled = true;
                document.getElementById(temtxtb).disabled = true;
                document.getElementById(temtxtc).disabled = true;

                var textval = document.getElementById(iccd.id);
                textval.innerHTML = "Edit Data ";
                $('#btngen').hide();
                $('#btngen').click();
            } else {

                var tembtnelse = "btn" + idRec;
                var temtxtaelse = "Txta" + idRec;
                var temtxtbelse = "Txtb" + idRec;
                var temtxtcelse = "Txtc" + idRec;

                if ($('#' + tembtnelse).text() === "Save Changes") {

                    document.getElementById(temtxtaelse).disabled = true;
                    document.getElementById(temtxtbelse).disabled = true;
                    document.getElementById(temtxtcelse).disabled = true;

                    document.getElementById(iccd.id).innerHTML = "Edit Data ";

                    return false;
                }

                $('#'+tembtnelse).text ( "Save Changes");

                document.getElementById(temtxtaelse).disabled = false;
                document.getElementById(temtxtbelse).disabled = false;
                document.getElementById(temtxtcelse).disabled = false;

              


            }
            return false;
        }