[Simple Way]-JavaScript Edit table row Using Popup

We have created a table with an edit and delete icon button, where you can select table rows, and click on the edit button it passes the information to the bootstrap modal window.

Onclick of the Edit button, the bootstrap Modal popup is displayed with corresponding row values inside it and on Onclick of submit button inside the modal popup, we will the edited values from the popup to be displayed back in that table row without reloading our web page.

javascript edit table row using popup html table

I have a table that is displaying information from tables and I have added a feature that after every row there is an edit button so that when the user clicked you can update the information for that row.I have created a popup using bootstrap that will show up when you click on the edit icon in the table row.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript edit table row using popup</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
    <div class="container">
        <h1>JavaScript edit table row using popup</h1>
        <br />
        <fieldset>
            <legend>
                Customer List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="tblbody">
                    <tr id="1">
                        <td class="td-data">1</td>
                        <td class="td-data">George</td>
                        <td class="td-data">Bluth</td>
                        <td class="td-data">george.bluth@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="2">
                        <td class="td-data">2</td>
                        <td class="td-data">Janet</td>
                        <td class="td-data">Weaver</td>
                        <td class="td-data">janet.weaver@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="3">
                        <td class="td-data">3</td>
                        <td class="td-data">Emma</td>
                        <td class="td-data">Wong</td>
                        <td class="td-data">emma.wong@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="4">
                        <td class="td-data">4</td>
                        <td class="td-data">Eve</td>
                        <td class="td-data">Holt</td>
                        <td class="td-data">eve.holt@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="5">
                        <td class="td-data">5</td>
                        <td class="td-data">Charles</td>
                        <td class="td-data">Morris</td>
                        <td class="td-data">charles.morris@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="6">
                        <td class="td-data">6</td>
                        <td class="td-data">Tracey</td>
                        <td class="td-data">Ramos</td>
                        <td class="td-data">tracey.ramos@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                </tbody>

            </table>
        </fieldset>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Update Detail</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="email">UserId:</label>
                        <input type="text" readonly class="form-control" id="txtupdate_ID">
                    </div>
                    <div class="form-group">
                        <label for="email">First name:</label>
                        <input type="text" class="form-control" id="txtupdate_firstName">
                    </div>
                    <div class="form-group">
                        <label for="email">Last name:</label>
                        <input type="text" class="form-control" id="txtupdate_lastName">
                    </div>
                    <div class="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" class="form-control" id="txtupdate_email">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" onclick="updateData()">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</body>
</html>
<script type="text/javascript">


    function showEditRow()
    {
        var rowdataId = event.target.parentNode.parentNode.id;
        //this gives id of tr whose button was clicked
        /*returns array of all elements with "td-data"" class within the row with given id*/
        var data = document.getElementById(rowdataId).querySelectorAll(".td-data");

        var ID = data[0].innerHTML;
        var firstname = data[1].innerHTML;
        var lastname = data[2].innerHTML;
        var email = data[3].innerHTML;

        document.getElementById("txtupdate_ID").value = ID;
        document.getElementById("txtupdate_firstName").value = firstname;
        document.getElementById("txtupdate_lastName").value = lastname;
        document.getElementById("txtupdate_email").value = email;
        $("#myModal").modal("show");
    }
    
    function deleteRow() {
        var rowdataId = event.target.parentNode.parentNode.id;
        document.getElementById(rowdataId).remove();
    }
    function updateData() {
        var rowdataId = document.getElementById("txtupdate_ID").value;
        var datatr = document.getElementById(rowdataId).querySelectorAll(".td-data");

        var Name = document.getElementById("txtupdate_firstName").value;
        var lastName = document.getElementById("txtupdate_lastName").value;
        var email = document.getElementById("txtupdate_email").value;

        datatr[0].innerHTML = rowdataId;
        datatr[1].innerHTML = Name;
        datatr[2].innerHTML = lastName;
        datatr[3].innerHTML = email;
        var actionbtn = "<button  class='btn btn-info btn-xs' onclick='showEditRow()'>Edit</button>" +
            "<button class='btn btn-danger btn-xs' onclick='deleteRow()'>Delete</button>"
        datatr[4].innerHTML = actionbtn;
        $("#myModal").modal("hide");
    }
</script>

HTML utilizes “HTML Tags” to make web archives. Every HTML tag characterizes the text that separates it somehow or another. This is called Markup. “<i>” is a HTML label that emphasizes the in the middle between.

Allow us to grasp this with a model.

We take a word, ‘appsloveworld’ which is composed basically. Which is straightforwardly noticeable to us like the ordinary text “appsloveworld”. Presently we markup it through HTML. Also, in the markup we make it sideways. When appsloveworld is composed like this <i>appsloveworld</i> between these two images, then this word will seem like this stressed “appsloveworld”. That is, it has been stamped italic.

This entire interaction is hit increasing itself. And all the web records on the web are organized along these lines.

This might appear to be a straightforward and ludicrous inquiry. Yet, assuming you ponder it, its existence is uncovered.

You have previously discovered that HTML is utilized to make web archives. Yet, it isn’t restricted to simply making web records.

Since HTML is the premise of the web. Without it the making of the web can’t be envisioned.

Aside from making HTML archive, it is additionally utilized a great deal here.

However, this way isn’t all that simple, on the grounds that a website specialist should have inventive abilities and specialized capacities. With the goal that he can make an incredible site. So presently the inquiry emerges that how to begin learning web planning. For this, there is a requirement for the right rules like which language and devices would it be a good idea for you to figure out how to use as a website specialist? What comes in this? Which course is expected for this.

Aside from this, there are numerous things whose information you ought to have. Here, data has been given pretty much that multitude of rules, which will help you in learning web planning.

Visual computerization – Although visual communication is a different subject, however it goes under web planning. It is the art of making visual substance to convey messages. By executing visual pecking order and page format procedures, website specialists use typography and outlines to meet the particular necessities of the client, while likewise zeroing in on the rationale of showing components in intelligent plan to upgrade the client experience. is.

Making Page Structure – You can likewise call the page design of a site as its establishment. The significant job of a website specialist is to further develop the webpage structure. Under web planning, the whole design of the site is ready, this work is finished utilizing HTML.

The post How to leave just points without lines in ChartJS appeared first on Software Development | Programming Tutorials.

Ashok Patel

I'm a software engineer, having good experience in software programming web designing with great command on ASP.NET, React JS, Angular JS,.NET Core HTML5, JavaScript, T-SQL, JQuery. Also have great experience in Electronics and electrical engineers design.

[Simple Way]-JavaScript Edit table row Using Popup

Read more article

Read More Articles

Ashok Patel