i cannot sure that my code is correct please help me i am waiting your answerlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34httpcodejquerycomjquery1101minjs34gtltscriptgt ltscriptgt my jquery code to add value in gridview documentreadyfunction 34btnAdd34clickfunction

Please refer this codeHTMLltform id34form134 runat34server34gt ltdivgt lttable border34034 cellpadding34034 cellspacing34034gt lttrgt lttdgt Id lttdgt lttdgt ltaspTextBox ID34txtId34 runat34server34 gt lttdgt lttrgt lttrgt lttdgt Name lttdgt lttdgt ltaspTextBox ID34txtName34 runat34server34 gt lttdgt lttrgt lttrgt lttdgt Country lttdgt lttdgt ltaspTextBox ID34txtCountry34 runat34server34 gt lttdgt lttrgt lttablegt ltb

Add new row to GridView using jQuery without using database in ASP.Net

zeeshanh...

SOLVED CLOSED ACTIVE ANSWERED
User: zeeshanharoon
Posted: on Jan 15, 2015 04:41 AM
Forum: Data Controls
Answer: 1
Views: 13567

i cannot sure that my code is correct ... please help me .....

i am waiting your answer

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  
 
 <script>  ////////////////////////////////////////my jquery code to add value in gridview///////
    $(document).ready(function () {
 
        $("#btnAdd").click(function () {
 
          var curren= ($("#txtcurrency").val());
           var fc=  ($("#txtfc").val());
            var lc=  ($("#txtlc").val());
            {
                for (var i = 0; i < data.d.length; i++) {
                    $("#gvDetails").append("<tr><td>" +' data.d[i].#txtcurrency '+ "</td><td>" +' data.d[i].#txtfc' + "</td><td>" + 'data.d[i].#txtlc' + "</td></tr>");
                }
            },
        });
 
});
 
 
</script>
</head>
<body>
///////////////////////////////////////////////button and gridview
    <form id="form1" runat="server">
   <input type="text" id="txtcurrency" value=""/>
    <input type="text" id="txtfc" value=""/>&nbsp;
    <input type="text" id="txtlc" value=""/>
        <%--<button id="showval">Show value</button--%>
  
    &nbsp;<div>
    <input id="btnAdd" type="button" value="Add"/>
         ////////////////////////////////////////////
             
          //////////////////////////////////////// gridview
            <asp:GridView ID="gvDetails" runat="server" BackColor="White" BorderColor="#999999" 
            BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical" 
            Height="152px" Width="531px">
        <AlternatingRowStyle BackColor="#DCDCDC" />
        <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="true" ForeColor="White" />
        <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
        <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
        <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F1F1F1" />
        <SortedAscendingHeaderStyle BackColor="#0000A9" />
        <SortedDescendingCellStyle BackColor="#CAC9C9" />
        <SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
 
    
    
    </form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 2

Reply
ANSWER
User: Azim
Replied: on Jan 15, 2015 06:38 AM
Modified: on Jan 15, 2015 07:07 AM
Report

Please refer this code

HTML

<form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    <asp:TextBox ID="txtId" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Country
                </td>
                <td>
                    <asp:TextBox ID="txtCountry" runat="server" />
                </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="btnAddRow" Text="Add Row" runat="server" />
        <br />
        <br />
        <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            </Columns>
        </asp:GridView>
    </div>
    </form>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnAddRow]").click(function () {
            var id = $("[id*=txtId]").val();
            var name = $("[id*=txtName]").val();
            var country = $("[id*=txtCountry]").val();
            if (id != "" && name != "" && country != "") {
                var row = $("[id*=GridView1] tr:last").clone();
                $("td:nth-child(1)", row).html(id);
                $("td:nth-child(2)", row).html(name);
                $("td:nth-child(3)", row).html(country);
                $("[id*=GridView1] tbody").append(row);
            }
            $("[id*=txtId]").val('');
            $("[id*=txtName]").val('');
            $("[id*=txtCountry]").val('');
            return false;
        });
    });
</script>

Namespace

using System.Data;

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Screenshot

Demo

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript"> 
    $(function () {
        $("[id*=btnAddRow]").click(function () {
            var id = $("[id*=txtId]").val();
            var name = $("[id*=txtName]").val();
            var country = $("[id*=txtCountry]").val();
            if (id != "" && name != "" && country != "") {
                var row = $("[id*=GridView1] tr:last").clone();
                $("td:nth-child(1)", row).html(id);
                $("td:nth-child(2)", row).html(name);
                $("td:nth-child(3)", row).html(country);
                $("[id*=GridView1] tbody").append(row);
            }
            $("[id*=txtId]").val('');
            $("[id*=txtName]").val('');
            $("[id*=txtCountry]").val('');
            return false;
        });
    });
</script>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTk4MzM3MjYyNw9kFgICAw9kFgICCQ88KwARAgAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnQCBGQBEBYAFgAWABYCZg9kFgoCAQ9kFgZmDw8WAh4EVGV4dAUBMWRkAgEPDxYCHwIFDEpvaG4gSGFtbW9uZGRkAgIPDxYCHwIFDVVuaXRlZCBTdGF0ZXNkZAICD2QWBmYPDxYCHwIFATJkZAIBDw8WAh8CBQ1NdWRhc3NhciBLaGFuZGQCAg8PFgIfAgUFSW5kaWFkZAIDD2QWBmYPDxYCHwIFATNkZAIBDw8WAh8CBQ9TdXphbm5lIE1hdGhld3NkZAICDw8WAh8CBQZGcmFuY2VkZAIED2QWBmYPDxYCHwIFATRkZAIBDw8WAh8CBQ9Sb2JlcnQgU2NoaWRuZXJkZAICDw8WAh8CBQZSdXNzaWFkZAIFDw8WAh4HVmlzaWJsZWhkZBgBBQlHcmlkVmlldzEPPCsADAEIAgFktSgznT3dQWBkQbfuO+Mso5xYIojKeV3QvIMGzSNPzfk=" />
</div>
 
<div class="aspNetHidden">
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLvhdrKDQKM+5bqDwLEhISFCwLppPneBgL7xYH0AzG1I6jRFbpYr08mwz4C4nz51sGdZRI/bQ+bO1Cuk8W1" />
</div>
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    <input name="txtId" type="text" id="txtId" />
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <input name="txtName" type="text" id="txtName" />
                </td>
            </tr>
            <tr>
                <td>
                    Country
                </td>
                <td>
                    <input name="txtCountry" type="text" id="txtCountry" />
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" name="btnAddRow" value="Add Row" id="btnAddRow" />
        <br />
        <br />
        <div>
	<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
		<tr style="color:White;background-color:#3AC0F2;">
			<th scope="col">Id</th><th scope="col">Name</th><th scope="col">Country</th>
		</tr><tr>
			<td style="width:30px;">1</td><td style="width:150px;">John Hammond</td><td style="width:150px;">United States</td>
		</tr><tr>
			<td style="width:30px;">2</td><td style="width:150px;">Mudassar Khan</td><td style="width:150px;">India</td>
		</tr><tr>
			<td style="width:30px;">3</td><td style="width:150px;">Suzanne Mathews</td><td style="width:150px;">France</td>
		</tr><tr>
			<td style="width:30px;">4</td><td style="width:150px;">Robert Schidner</td><td style="width:150px;">Russia</td>
		</tr>
	</table>
</div>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add new row to GridView using jQuery without using database in ASP.Net

Company

Explore

Follow us

Contact Us