How to Dynamically Add Edit/Delete Buttons for each row in a HTML table

Question

I have a SQL table that I'm using to populate a table, and I want to add 'Delete' and 'Edit' Buttons to the row.

I have an input textbox corresponding to a column in my sql table, "PartNo". I currently have two functions: BuildTable and GetData, both a called when a button is pushed. GetData() makes the connection with the sql database and queries for data with the user specified PartNo, and BuildTable uses a StringBuilder class to create an html table and populate it with the sql data. I want each row to have a delete and edit button for which can delete and edit that specific row.

protected void BuildTable(Datatable dt){
//Building an HTML string;
        StringBuilder html = new StringBuilder();
        html.Append("<h3><b>Parts Location Details</b></h3>");
        //table start
        html.Append("<table align='center' bgcolor='#dbdbdb'>");

        //Building the Header row.
        html.Append("<tr >");
        foreach (DataColumn column in dt.Columns)
        {
            html.Append("<th style='color: white' bgcolor='darkblue'>");
            html.Append(column.ColumnName);
            html.Append("</th>");
        }
        html.Append("<th style ='color:white' bgcolor ='blue'>Edit</th>");
        html.Append("<th style ='color:white' bgcolor ='blue'>Delete</th>");
        html.Append("<th style ='color:white' bgcolor ='blue'>Print</th>");
        html.Append("<tr>");

        //building the data row
        foreach (DataRow row in dt.Rows)
        {
            countRows++;
            html.Append("<tr>");
            foreach (DataColumn column in dt.Columns)
            {
                html.Append("<td>");
                html.Append(row[column.ColumnName]);
                html.Append("</td>");
            }
            html.Append("<td><input type='button' value='Edit'/></td>");
            html.Append("<td><input type='button' value='Delete' runat='server' onclick='btndelete_Click'/></td>");
            //html.Append("<td><asp:button ID='delete' runat='server' Text='Delete' OnClick='btndelete'/></td>");
            html.Append("<td><input type='button' value='Print'/></td>");
            html.Append("</tr>");
        }
        //table end
        html.Append("</table>");

        //append the HTML string to PlaceHolder with ID=spDetailsNew
        spDetailsNew.Controls.Add(new Literal { Text = html.ToString() });
}

I have tried using a regular html input button and an asp:button object; the asp:button object doesn't show on the table, and the input button's 'onclick' function isn't called when it's clicked. I haven't coded the Delete onclick function yet; it's just supposed to give an alert that the Delete button has been pushed, and it's not doing that.

as is, you have no markup defining each row. You should consider using a viewmodel and datamodel here. Data bound to the page controller. You can then use each row's UID for the script call in the edit/delete button. (Using the type of markup Thomas described below.) Or just create text links which pass the IDs to another page. — browsermator
– browsermator, Commented Jun 17, 2019 at 20:00
Possible duplicate of jquery datatable edit table row data using form — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jun 18, 2019 at 4:50

Thomas Gicquel · Accepted Answer · 2019-06-17 19:09:52Z

0

why you don't build your table with razor ? - create a customObject to store your data - create a view and pass your object - on your cshtml

<table>
    <tr>
        @foreach (var item in items)
        {
            <td>@item.something</td>
        }
    </tr>
...

If you don't want use razor, you should write some javascript and attach to the onclick="javascriptFunction()". And on the stringbuilder add the javascript :

<script> javascriptFunction() { /** code here */ } </script>

answered Jun 17, 2019 at 19:09

Thomas Gicquel

712 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

browsermator · Accepted Answer · 2019-06-17 20:37:50Z

As Thomas said, it'll be easier to use an MVC approach. here's an example of how I use razor style markup (using "HTMLHelpers") for edit/details/delete links:

  @foreach (var item in Model.BOMs)
    {
       <tr>
        <td>
       @Html.DisplayFor(modelItem => item.BOMItem.InternalPN)
       </td>
       //  other cells....
    <td nowrap="">
                <a asp-page="./Edit" asp-route-id="@item.BOMItem.ID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.BOMItem.ID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.BOMItem.ID" asp-route-KitID="@Model.CurrentKitID"
                   asp-route-limit="@Model.CurrentLimit"
                   asp-route-pageIndex="@Model.CurrentPageIndex"
                   asp-route-SortOrder="@Model.CurrentSort"
                   asp-route-SortDir="@Model.CurrentSortDir"
                   asp-route-ViewMode="@Model.CurrentViewMode">Delete</a>
            </td>
          </tr>
    }

The "asp-page" parts set which page the data is sent to. The "asp-route-" part defines variables which are bound to the controller (page_name.cs). You'll see the "asp-route-id" value is set to "@item.BOMItem.ID" which is a part of the viewmodel and corresponds to the datamodel's UID. The controller does the database lookup and creates the "BOMs" viewmodel. (Ignore the other "asp-route-" variables, those are just view variables for the page.) Here's a tutorial on Razor Pages: https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.2&tabs=visual-studio If needed. (It's just a sort of simplified framework for MVC... and is a good starting point for learning MVC.)

Collectives™ on Stack Overflow

How to Dynamically Add Edit/Delete Buttons for each row in a HTML table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related