locked
how i can insert textbox value in a table cell with gridview? RRS feed

  • Question

  • User1803911507 posted

    How can i insert values of these textboxes in a table after I click on the button .... so that the values of each of the textboxes are displayed in a row. ........like this picture

    picture of my question

    Saturday, November 17, 2018 8:22 AM

All replies

  • User-369506445 posted

    hi

    please try below code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <script>
            $(function () {
                $("#btn").click(function () {
    
                    var table = $('<table></table>').addClass('table');
                    for (var i = 0; i < 3; i++) {
                        row = $('<tr></tr>');
    
                        var rowDataNAme = $('<td></td>').text($("#name" + (i + 1)).val());
                        var rowDataAge = $('<td></td>').text($("#age" + (i + 1)).val());
                        var rowDataJob = $('<td></td>').text($("#job" + (i + 1)).val());
                        row.append(rowDataNAme);
                        row.append(rowDataAge);
                        row.append(rowDataJob);
    
                        table.append(row);
                        
                    }
    
                    $('#someContainer').html(table);
    
                });
            });
        </script>
    
    <body>
        <table>
            <tr>
                <td>name
                    <input type="text" id="name1" /></td>
                <td>age
                    <input type="text" id="age1" /></td>
                <td>job
                    <input type="text" id="job1" /></td>
            </tr>
            <tr>
                <td>name
                    <input type="text" id="name2" /></td>
                <td>age
                    <input type="text" id="age2" /></td>
                <td>job
                    <input type="text" id="job2" /></td>
            </tr>
            <tr>
                <td>name
                    <input type="text" id="name3" /></td>
                <td>age
                    <input type="text" id="age3" /></td>
                <td>job
                    <input type="text" id="job3" /></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="button" id="btn" value="click" />
                </td>
            </tr>
        </table>
    
         <div id="someContainer" />
         
    </body>

    DEMO

    Saturday, November 17, 2018 10:30 AM
  • User1803911507 posted

    thanks bro . but i want it with asp.net and gridview system , no jquery

    Saturday, November 17, 2018 1:06 PM
  • User-369506445 posted

    please try <g class="gr_ gr_13 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="13" data-gr-id="13">belo</g> code 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <body>
        <form runat="server">
              <table>
            <tr>
                <td>name
                    <asp:TextBox runat="server" ID="name1" /></td>
                <td>age
                    <asp:TextBox runat="server" ID="age1" /></td>
                <td>job
                    <asp:TextBox runat="server" ID="job1" /></td>
            </tr>
            <tr>
                <td>name
                    <asp:TextBox runat="server" ID="name2" /></td>
                <td>age
                    <asp:TextBox runat="server" ID="age2" /></td>
                <td>job
                    <asp:TextBox runat="server" ID="job2" /></td>
            </tr>
            <tr>
                <td>name
                    <asp:TextBox runat="server" ID="name3" /></td>
                <td>age
                    <asp:TextBox runat="server" ID="age3" /></td>
                <td>job
                    <asp:TextBox runat="server" ID="job3" /></td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Button runat="server" ID="btn" Text="click" OnClick="btn_Click"/>
                </td>
            </tr>
        </table>
    
        <asp:Table ID="myTable" runat="server" Width="100%"> 
        <asp:TableRow>
            <asp:TableCell>Name</asp:TableCell>
            <asp:TableCell>Age</asp:TableCell>
            <asp:TableCell>Job</asp:TableCell>
        </asp:TableRow>
    </asp:Table>  
        </form>
    
    </body>
    </html>

    in Code behind

    protected void btn_Click(object sender, EventArgs e)
            {
                
                for (int i = 1; i <= 3; i++)
                {
                    TableRow row = new TableRow();
                    TableCell cellName = new TableCell();
                    TableCell cellAge = new TableCell();
                    TableCell cellJob = new TableCell();
    
                    cellName.Text = (this.FindControl("name" + i) as TextBox).Text;
                    cellAge.Text = (this.FindControl("age" + i) as TextBox).Text;
                    cellJob.Text = (this.FindControl("job" + i) as TextBox).Text;
    
                    row.Cells.Add(cellName);
                    row.Cells.Add(cellAge);
                    row.Cells.Add(cellJob);
    
                    myTable.Rows.Add(row);
                }
               
            }

    Saturday, November 17, 2018 1:23 PM
  • User839733648 posted

    Hi danteir,

    You could define a DataTable and add the textboxes' values to it.

    For more you could refer to the code below.

    .Aspx

        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td>name:<asp:TextBox runat="server" ID="name1" /></td>
                        <td>age:<asp:TextBox runat="server" ID="age1" /></td>
                        <td>job:<asp:TextBox runat="server" ID="job1" /></td>
                    </tr>
                    <tr>
                        <td>name:<asp:TextBox runat="server" ID="name2" /></td>
                        <td>age:<asp:TextBox runat="server" ID="age2" /></td>
                        <td>job:<asp:TextBox runat="server" ID="job2" /></td>
                    </tr>
                    <tr>
                        <td>name:<asp:TextBox runat="server" ID="name3" /></td>
                        <td>age:<asp:TextBox runat="server" ID="age3" /></td>
                        <td>job:<asp:TextBox runat="server" ID="job3" /></td>
                    </tr>
                    <tr>
                        <td><asp:Button runat="server" ID="btn" Text="AddRows" OnClick="btn_Click" /></td>
                    </tr>
                </table>
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
            </div>
        </form>

    Code-behind.

            protected void btn_Click(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[] { new DataColumn("RowNumber"), new DataColumn("Name"), new DataColumn("Age"), new DataColumn("Job") });
                for(int i = 1; i < 4; i++)
                {
                    DataRow dr = dt.NewRow();
                    dr["RowNumber"] = i.ToString();
                    dr["Name"] = (FindControl("name" + i) as TextBox).Text.Trim();
                    dr["Age"] = (FindControl("age" + i) as TextBox).Text.Trim();
                    dr["Job"] = (FindControl("job" + i) as TextBox).Text.Trim();
                    dt.Rows.Add(dr);
                }
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }

    result:

    Best Regards,

    Jenifer

    Wednesday, November 21, 2018 8:13 AM