Editable HTML Table using jQuery in ASP.Net

Last Reply 12 days ago By dharmendr

Posted 12 days ago

I want an editable grid which is working fine with jquery. 

When I click on edit the html cell row gets replaced with textbox but the problem is that when I click on another row with edit option the previous textbox does not get replaced with html cell.

I've tried certain things but failed.

Need help?

<script type="text/javascript">
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
        var actions = $("table td:last-child").html();
       
        // Edit row on edit button click
        $(document).on("click", ".edit", function () {
 
            var row_index = $(this).closest("tr").index();
            alert(row_index);
 
 
            $(this).parents("tr").find("td:not(:last-child)").each(function () {
 
 
                $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
            });
            $(this).parents("tr").find(".add, .edit").toggle();
            $(".add-new").attr("disabled", "disabled");
        });
    });
</script>
<div class="container">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-8">
                    <h2>
                        Employee <b>Details</b></h2>
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info add-new">
                        <i class="fa fa-plus"></i>Add New</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered" id="demo">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Department</th>
                    <th>Phone</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>Administration</td>
                    <td>(171) 555-2222</td>
                    <td>
                        <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                        <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                        <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                    </td>
                </tr>
                <tr>
                    <td>Peter Parker</td>
                    <td>Customer Service</td>
                    <td>(313) 555-5735</td>
                    <td>
                        <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                        <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                        <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                    </td>
                </tr>
                <tr>
                    <td>Fran Wilson</td>
                    <td>Human Resources</td>
                    <td>(503) 555-9931</td>
                    <td>
                        <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                        <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                        <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

 

You are viewing reply posted by: dharmendr 12 days ago.
Posted 12 days ago

Hi vishal101,

Refer below code.

If you want to implement properly refer below links.

How to insert,update and Delete data from Html Table using Ajax Jquery in ASP.Net

Editable Table MVC: Implement Insert Update Edit Delete in HTML Table using ASP.Net MVC

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
            var actions = $("table td:last-child").html();
            // Append table with add row form on add new button click
            $(".add-new").click(function () {
                $(this).attr("disabled", "disabled");
                var index = $("table tbody tr:last-child").index();
                var row = '<tr>' +
                        '<td><input type="text" class="form-control" name="name" id="name"></td>' +
                        '<td><input type="text" class="form-control" name="department" id="department"></td>' +
                        '<td><input type="text" class="form-control" name="phone" id="phone"></td>' +
                        '<td>' + actions + '</td>' +
                        '</tr>';
                $("table").append(row);
                $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
                $('[data-toggle="tooltip"]').tooltip();
            });
            // Add row on add button click
            $(document).on("click", ".add", function () {
                var empty = false;
                var input = $(this).parents("tr").find('input[type="text"]');
                input.each(function () {
                    if (!$(this).val()) {
                        $(this).addClass("error");
                        empty = true;
                    } else {
                        $(this).removeClass("error");
                    }
                });
                $(this).parents("tr").find(".error").first().focus();
                if (!empty) {
                    input.each(function () {
                        $(this).parent("td").html($(this).val());
                    });
                    $(this).parents("tr").find(".add, .edit").toggle();
                    $(".add-new").removeAttr("disabled");
                }
            });
            // Edit row on edit button click
            $(document).on("click", ".edit", function () {
                var row_index = $(this).closest("tr").index();
                alert(row_index);

                $('#demo tbody').find("tr").each(function (index, tds) {
                    if (index == row_index) {
                        $(tds).find("td:not(:last-child)").each(function (i, item) {
                            $(this).html('<input type="text" class="form-control" value="' + $(this).text().trim() + '">');
                        });
                    } else {
                        $(tds).find("td:not(:last-child)").each(function (i, item) {
                            $(this).html($(this).find('input').val());
                        });
                    }
                });


                $(this).parents("tr").find(".add, .edit").toggle();
                $(".add-new").attr("disabled", "disabled");
            });
            // Delete row on delete button click
            $(document).on("click", ".delete", function () {
                $(this).parents("tr").remove();
                $(".add-new").removeAttr("disabled");
            });
        });
    </script>
    <div class="container">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-8">
                        <h2>Employee <b>Details</b></h2>
                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-info add-new">
                            <i class="fa fa-plus"></i>Add New</button>
                    </div>
                </div>
            </div>
            <table class="table table-bordered" id="demo">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Department</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>Administration</td>
                        <td>(171) 555-2222</td>
                        <td>
                            <a class="add" title="Add" data-toggle="tooltip"><i class="fa fa-plus">&#xE03B;</i></a>
                            <a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit">&#xE254;</i></a>
                            <a class="delete" title="Delete" data-toggle="tooltip"><i class="fa fa-remove">&#xE872;</i></a>
                        </td>
                    </tr>
                    <tr>
                        <td>Peter Parker</td>
                        <td>Customer Service</td>
                        <td>(313) 555-5735</td>
                        <td>
                            <a class="add" title="Add" data-toggle="tooltip"><i class="fa fa-plus">&#xE03B;</i></a>
                            <a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit">&#xE254;</i></a>
                            <a class="delete" title="Delete" data-toggle="tooltip"><i class="fa fa-remove">&#xE872;</i></a>
                        </td>
                    </tr>
                    <tr>
                        <td>Fran Wilson</td>
                        <td>Human Resources</td>
                        <td>(503) 555-9931</td>
                        <td>
                            <a class="add" title="Add" data-toggle="tooltip"><i class="fa fa-plus">&#xE03B;</i></a>
                            <a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit">&#xE254;</i></a>
                            <a class="delete" title="Delete" data-toggle="tooltip"><i class="fa fa-remove">&#xE872;</i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Demo