Add,Delete Client side GridviewRow and save Record in server side in asp.net

function AddNewRecord() {
         
         var grd = document.getElementById('GridView1');
         var tbod = grd.rows[0].parentNode;
         var newRow = grd.rows[grd.rows.length - 1].cloneNode(true);        
         tbod.appendChild(newRow);
         return false;

     }
 function delrow(rowindex) {
        
         
                var grd = document.getElementById('GridView1');
                if (grd.rows.length < 2)
                    alert("At least 1 Item is required.");
                else
                 var tbod = grd.rows[0].parentNode;

                  tbod.deleteRow(rowindex.parentNode.parentNode.rowIndex);
                   
                  // grd.deleteRow(rowindex + 1);
                  return false;

     }
  <asp:Button ID="Button2" runat="server" Text="Add Row" OnClientClick="return AddNewRecord();"/>
  
  <asp:GridView ID="GridView1" runat="server"
        AlternatingItemStyle-CssClass="row_white" AutoGenerateColumns="False"
        CssClass="row_blue" Width="50%">
        <HeaderStyle CssClass="header" />
        <Columns>
      


        
         <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
           
          <asp:TemplateField HeaderText="delete">
                <ItemTemplate>
           
        
                                                                <img src="../images/delete.png" alt="Delete" style="cursor: pointer; padding-right: 20px"
                                                                onclick="delrow(this);" title="Delete" width="10" height="11" />
                                                              
            
               </ItemTemplate>
            </asp:TemplateField>
           
           
           
                                         
        </Columns>
    </asp:GridView>
   
and save Record in Server side Database

int liCounter = 1;
        while (!string.IsNullOrEmpty(Request.Form["GridView1$ctl" + liCounter.ToString()+"$TextBox"+ liCounter.ToString()]))
        {        
            string str = Convert.ToString(Request.Form["GridView1$ctl" + liCounter.ToString() + "$TextBox" + liCounter.ToString()]); //percentage         
            liCounter++;

            Response.Write(str+"<br>");
        }

Dynamic Tooltips Asp.net

style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 1px solid skyblue;
padding: 2px;
background-color: #cad4e7;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cad4e7,direction=135);
}

</style>






    <asp:TemplateField HeaderText="ID">
 
                                        <ItemTemplate>
                                           
                                    <div onmouseover="shownow('Status:<%# Eval("Status_Name") %>,Visit Date:<%# Eval("Visit_Date") %>,mangesh,raj,vis')"
                                     onmouseout="hideddrivetip();">       
                                 <asp:LinkButton id="lnkID" CssClass="TableDataLink" runat="server" Text='<%# Bind("Status_Name") %>'
                                  ToolTip='<%# Bind("Status_Name") %>' ></div>
                                    </asp:LinkButton>

                                    </div>
                                       
                                        </ItemTemplate>
                                    </asp:TemplateField>     












<div id="dhtmltooltip"></div>
            <script type="text/javascript">
            

                var offsetxpoint = -60 //Customize x offset of tooltip
                var offsetypoint = 20 //Customize y offset of tooltip
                var ie = document.all
                var ns6 = document.getElementById && !document.all
                var enabletip = false
                if (ie || ns6)
                    var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""

                function ietruebody() {
                    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
                }

                function ddrivetip(thetext, thecolor, thewidth) {
                    if (ns6 || ie) {
                        if (typeof thewidth != "undefined") tipobj.style.width = thewidth + "px"
                        if (typeof thecolor != "undefined" && thecolor != "") tipobj.style.backgroundColor = thecolor
                        tipobj.innerHTML = thetext
                        enabletip = true
                        return false
                    }
                }

                function positiontip(e) {
                    if (enabletip) {
                        var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
                        var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
                        //Find out how close the mouse is to the corner of the window
                        var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
                        var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20

                        var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000

                        //if the horizontal distance isn't enough to accomodate the width of the context menu
                        if (rightedge < tipobj.offsetWidth)
                        //move the horizontal position of the menu to the left by it's width
                            tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
                        else if (curX < leftedge)
                            tipobj.style.left = "5px"
                        else
                        //position the horizontal position of the menu where the mouse is positioned
                            tipobj.style.left = curX + offsetxpoint + "px"

                        //same concept with the vertical position
                        if (bottomedge < tipobj.offsetHeight)
                            tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
                        else
                            tipobj.style.top = curY + offsetypoint + "px"
                        tipobj.style.visibility = "visible"
                    }
                }

                function hideddrivetip() {
                    if (ns6 || ie) {
                        enabletip = false
                        tipobj.style.visibility = "hidden"
                        tipobj.style.left = "-1000px"
                        tipobj.style.backgroundColor = ''
                        tipobj.style.width = ''
                    }
                }

                document.onmousemove = positiontip


                function shownow(str) {
                    // debugger;<img src= />
                
                  //  sleep(1000);
                  
                   // ddrivetip(tblstart + listr + tblend, '#cad4e7', 250);

                    var myarray = str.split(',');
                    var tblstart = '<table><tr><td ><font color="darkred" size="0.5">';
                    var listr='';

                    var tblend = '</font></td></tr></table>';

                    for (var i = 0; i < myarray.length; i++) {
                        //console.log(myarray[i]);
                        listr =listr+ '<li>' + myarray[i] + '</li>';

                    }

                   // alert(tblstart + listr + tblend);
                   // ddrivetip('<table><tr><td width="100%"><font color="darkred" size="0.5"><li>' + str + '</font></td></tr></table>', '#cad4e7', 250);

                    ddrivetip(tblstart + listr + tblend, '#cad4e7', 0);

                }

                function sleep(ms) {
                    ddrivetip('<img src="../images/loading.gif" />', 'red', 470);
                    var dt = new Date();
                    dt.setTime(dt.getTime() + ms);
                    while (new Date().getTime() < dt.getTime());
                }

            </script>

CSS Form

.textbox {

    background: url("../images/bg_textbox.png") repeat-x scroll 0 0 #D3D3D3;

    border: 1px solid #D6D5D5;

    color: #212121;

    font-family: Arial;

    font-size: 12px;

    height: 19px;

}

.button {

    background-image: url("../images/button-bg.png");

    color: #FFFFFF;

    display: inline-block;

    font-size: 13px;

    padding: 7px 20px;

    text-decoration: none;

}