javascript - Add editdelete button at the end of the table row - Stack Overflow

admin管理员组

文章数量:1419611

I've inline create of row in table in my index view.when user click on add row button it pre-append new editable row to the table .

at the end of the row there is button for save the data of the new row.when user click on save I disable the textboxes and checkboxes and

remove the button of create, what I need is instead add to this row the button of edit and delete, which is default for all table rows, how should I do that?

Here is the code for disable the row fields:

//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");

Here is the defult button for all the rows(if i press on create and refresh the page I will see the button also in this new saved row but I want to

add them when the row is added and the page was not refreshed...

   <td>
       @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
       @Html.ActionLink("Delete", "Delete", new { id = item.Id })
   </td>

This is how I add the new row with the create button when user click on create new row

var html = '<tr><td>@Html.TextBox("name")</td><td>@Html.CheckBox("checkBox1")</td><td>@Html.CheckBox("checkBox2")</td><td>@Html.CheckBox("checkBox3")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';

    function addRow() {

        if ($('#btnsubmit').length == 0) {

            //Append new row to the table
            jQuery(html).prependTo('#data-table');

UPDATE this is the example of the table which for every row there is edit/delete button

UPDATE 2

I try to add the following but the button is not added when click on create

 $('#btnsubmit').click(function () {

                $.post("/Roles/Create", { name : $("name").val() }, function(NewID){

                    var oTD = $("#btnsubmit").parent();
                    oTD.append("<a href='/Roles/Edit/"+ NewID +"'>Edit</a>");

                    oTD.append("<a href='/Roles/Delete/"+ NewID +"'>Delete</a>");


                });

I've inline create of row in table in my index view.when user click on add row button it pre-append new editable row to the table .

at the end of the row there is button for save the data of the new row.when user click on save I disable the textboxes and checkboxes and

remove the button of create, what I need is instead add to this row the button of edit and delete, which is default for all table rows, how should I do that?

Here is the code for disable the row fields:

//Hide the create button
$('#btnsubmit').remove();
//Change the name property to disabled
$('input').attr('readonly', true);
$('#name').css("border", "none");

Here is the defult button for all the rows(if i press on create and refresh the page I will see the button also in this new saved row but I want to

add them when the row is added and the page was not refreshed...

   <td>
       @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
       @Html.ActionLink("Delete", "Delete", new { id = item.Id })
   </td>

This is how I add the new row with the create button when user click on create new row

var html = '<tr><td>@Html.TextBox("name")</td><td>@Html.CheckBox("checkBox1")</td><td>@Html.CheckBox("checkBox2")</td><td>@Html.CheckBox("checkBox3")</td><td><input id="btnsubmit" type="submit" value="Create" class="btn btn-default" /></td><td></tr>';

    function addRow() {

        if ($('#btnsubmit').length == 0) {

            //Append new row to the table
            jQuery(html).prependTo('#data-table');

UPDATE this is the example of the table which for every row there is edit/delete button

UPDATE 2

I try to add the following but the button is not added when click on create

 $('#btnsubmit').click(function () {

                $.post("/Roles/Create", { name : $("name").val() }, function(NewID){

                    var oTD = $("#btnsubmit").parent();
                    oTD.append("<a href='/Roles/Edit/"+ NewID +"'>Edit</a>");

                    oTD.append("<a href='/Roles/Delete/"+ NewID +"'>Delete</a>");


                });

• javascript
• jquery
• html
• asp

Share Improve this question Follow edited Jun 2, 2014 at 17:32 mileyH asked Jun 2, 2014 at 14:35 mileyHmileyH 17611 gold badge66 silver badges2020 bronze badges 9

• 1 Not able to understand your question – Rashmin Javiya Commented Jun 2, 2014 at 14:39
• @RashminJaviya-please see my update ,if its not help please let me know what you dont understand and I will explain ... – mileyH Commented Jun 2, 2014 at 14:43
• what I need is instead add to this row the button of edit and delete, which is default for all table rows what do you mean by this – Rashmin Javiya Commented Jun 2, 2014 at 14:50
• @RashminJaviya-please see my updated post let me know if you have any qustion... – mileyH Commented Jun 2, 2014 at 15:11
• Does the save button postback the page or you manage through ajax? – Rashmin Javiya Commented Jun 2, 2014 at 15:16

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 2

You will have to return the ID in response of ajax call and add append anchor with the returned ID

function SaveData()
{
    $.post("/[Controllar]/Savedata", { firstname : $("txtFirst").val(), lastname : $("txtLast").val() }, function(NewID){

        var oTD = $("#btnsubmit").parent();
        oTD.append("<a href='/[ControllarName]/Edit/"+ NewID +"'>Edit</a>");
        oTD.append("<a href='/[ControllarName]/Detail/"+ NewID +"'>Detail</a>");
        oTD.append("<a href='/[ControllarName]/Delete/"+ NewID +"'>Delete</a>");

        //Hide the create button
        $('#btnsubmit').remove();
        //Change the name property to disabled
        $('input').attr('readonly', true);
        $('#name').css("border", "none");
    });
}

本文标签： javascriptAdd editdelete button at the end of the table rowStack Overflow