Dynamically Add/Remove table rows in ASP.NET

Question

Does anyone know how to dynamically add and remove rows in a table triggered by a button click from the backend (in c#) using asp.net?

Here's how it might be done in javascript, is there any way to do this in the asp.net framework?

http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

Are you binding this table to a DataSource? The answer to this question will be different if that's the case. — jwheron, Jan 20 '11 at 22:38

score 1 · Answer 1 · answered Jan 20 '11 at 19:59

1

In the event handler for your button:

Open a connection to the database which contains the table you wish to modify.
If you want to add a row, execute an INSERT statement (or a stored procedure which INSERTs). If you want to remove a row execute a DELETE statemenet (or, etc.).
Close the database connection.

Your table should be modified. Once you master this kind of stuff, I would recommend you look at an OR Mapper like Entity Framework or NHibernate, which will provide a layer for managing this kind of stuff in a more efficient way.

answered Jan 20 '11 at 19:59

Chris B. Behrens

6,255
8
45
71

sorry, i should clarify, i'm thinking about a table control on the front end, not the database – locoboy Jan 20 '11 at 20:24
LOL...that makes a lot more sense. Use an ASP.Net table control (rather than a plain-vanilla `` tag) and then do tableControl.Rows.Add(myNewRow) or tableControl.Rows.Remove(myExistingRow). You add TableCell objects to the TableRow objects, just like in HTML. http://www.w3schools.com/aspnet/control_table.asp
– Chris B. Behrens Jan 20 '11 at 20:31

score 1 · Answer 2 · answered Jan 20 '11 at 20:30

Build your table from the code behind. You will be able to do whatever you want that way. something like that, not sure about the class names:

var table = new Table();
var row = new TableRow();
table.Controls.Add(row);
var cell = new TableCell();
row.Controls.Add(cell);
page.Controls.Add(table);

score 0 · Answer 3 · answered Feb 10 '14 at 00:38

try this, it worked for me

           HtmlTable tbl = (HtmlTable)pnl.FindControl("tblDataFeed");

            for (int ix = 0; ix <= tbl.Rows.Count - 1; ix++)
            {
                HtmlTableRow row = tbl.Rows[ix];
                tbl.Rows.Remove(row);
            }

or this

            foreach (HtmlTableRow inRow in tbl.Rows)
            {
               tbl.Rows.Remove(inRow);
            }

score 0 · Answer 4 · answered Jul 22 '16 at 06:43

You can use this code to remove row from table on button click.

 protected void btnRemove_Click(object sender, EventArgs e)
    {
        LinkButton btn = (LinkButton)sender;
        string bid = btn.ID;       
        Table tl = (Table)panel.FindControl("tal");
        for (int i = 1; i < tbl.Rows.Count; i++)
        {
            TableRow row = (TableRow)tl.Rows[i];
            string id = "lnk" + (i-1).ToString();
            if (bid == row.Cells[2].FindControl(id).ID)
            {
                tbl.Rows.Remove(row);
            }
        }
    }

Dynamically Add/Remove table rows in ASP.NET

4 Answers4

Linked