In our last article, we discussed CRUD operations using JSON in JavaScript and in this article, We will discuss How to edit/delete the selected row from the HTML table using JavaScript with icons.

we are using the Bootstrap table and I have placed two action buttons icons in the table i.e edit and delete. Now onClick edit button, we convert selected row into an editable format so that users can update their information and the delete button should remove the row.

we going to provide an easy way to make them editable inline so let’s make the edit and delete buttons functional.

How to edit selected row from HTML table using JavaScript

 

How to edit delete selected row from HTML table using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How to edit/remove selected row from HTML table using JavaScript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <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>How to edit/delete selected row from HTML table using JavaScript</h1>
        <br />
        <fieldset>
            <legend>
                Customer List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>CustomerId</th>
                        <th>CustomerName</th>
                        <th>CustomerEmail</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody id="tblbody">
                    <tr id="119447">
                        <td class="td-data">119447</td>
                        <td class="td-data">Qa</td>
                        <td class="td-data">anny@gmail.com</td>
                        <td class="td-data">USA</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="119443">
                        <td class="td-data">119443</td>
                        <td class="td-data">Qa</td>
                        <td class="td-data">kill@gmail.com</td>
                        <td class="td-data">USA</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="119437">
                        <td class="td-data">119437</td>
                        <td class="td-data">Qa</td>
                        <td class="td-data">lamind@gmail.com</td>
                        <td class="td-data">USA</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="119428">
                        <td class="td-data">119428</td>
                        <td class="td-data">Maduwantha</td>
                        <td class="td-data">anyy@gmail.com</td>
                        <td class="td-data">CAN</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="119422">
                        <td class="td-data">119422</td>
                        <td class="td-data">kamii</td>
                        <td class="td-data">kamii@gmail.com</td>
                        <td class="td-data">usa</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="119421">
                        <td class="td-data">119421</td>
                        <td class="td-data">kellu</td>
                        <td class="td-data">kellu@gmail.com</td>
                        <td class="td-data">usa</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="119411">
                        <td class="td-data">119411</td>
                        <td class="td-data">damna</td>
                        <td class="td-data">damna@gmail.com</td>
                        <td class="td-data">usa</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="119409">
                        <td class="td-data">119409</td>
                        <td class="td-data">csd</td>
                        <td class="td-data">tinku@gmail.com</td>
                        <td class="td-data">France</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="119385">
                        <td class="td-data">119385</td>
                        <td class="td-data">asd</td>
                        <td class="td-data">tork@gmail.com</td>
                        <td class="td-data">Paris</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>
</body>
</html>
<script type="text/javascript">
    function showEditRow() {
        debugger;
        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 name = data[1].innerHTML;
        var email = data[2].innerHTML;
        var address = data[3].innerHTML;

        data[0].innerHTML = '<input name="txtupdate_ID"  disabled id="txtupdate_ID" value="' + ID + '"/>';
        data[1].innerHTML = '<input name="txtupdate_Name" id="txtupdate_Name" value="' + name + '"/>';
        data[2].innerHTML = '<input name="txtupdate_email" id="txtupdate_email" value="' + email + '"/>';
        data[3].innerHTML = '<input name="txtupdate_Address" id="txtupdate_Address" value="' + address + '"/>';


        data[4].innerHTML =
            "<button class='btn btn-primary btn-xs btn-updateCustomer' onclick='updateData()'>" +
            "Update</button>"
            + "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancelUpdate()'>Cancel</button>"
            + "<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow()'>"
            + "Delete</button>"
    }
    function cancelUpdate() {
        var rowdataId = event.target.parentNode.parentNode.id;
        var dataRow = document.getElementById(rowdataId); //this gives tr of  whose button was clicked
        var trRow = dataRow.querySelectorAll(".td-data");

        var Name = trRow[1].querySelectorAll("#txtupdate_Name")[0].value;
        var email = trRow[2].querySelectorAll("#txtupdate_email")[0].value;
        var address = trRow[3].querySelectorAll("#txtupdate_Address")[0].value;


        trRow[0].innerHTML = rowdataId;
        trRow[1].innerHTML = Name;
        trRow[2].innerHTML = email;
        trRow[3].innerHTML = address;


        var actionbtn = "<button  class='btn btn-info btn-xs' onclick='showEditRow()'>Edit</button>" +
            "<button class='btn btn-danger btn-xs' onclick='deleteRow()'>Delete</button>"
        trRow[4].innerHTML = actionbtn;
    }
    function deleteRow() {
        var rowdataId = event.target.parentNode.parentNode.id;
        document.getElementById(rowdataId).remove();
    }
    function updateData() {
        var rowdataId = event.target.parentNode.parentNode.id;
        var dataRow = document.getElementById(rowdataId); //this gives tr of  whose button was clicked
        var datatr = dataRow.querySelectorAll(".td-data");

        var Name = datatr[1].querySelector("#txtupdate_Name").value;
        var email = datatr[2].querySelector("#txtupdate_email").value;
        var address = datatr[3].querySelector("#txtupdate_Address").value;

        datatr[0].innerHTML = rowdataId;
        datatr[1].innerHTML = Name;
        datatr[2].innerHTML = email;
        datatr[3].innerHTML = address;
        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;
    }
</script>

If you have any queries or doubts, please comment.

📰 Read more article

Note*

The first and most important thing is the target audience, that is, the visitors to your website, when you come to know about the audience of your website, then your work becomes very easy.

With this, you get to understand what type of content your audience is like, now according to this you will be able to design your site further.

For example, if you are making a website for an automobile, then it is obvious that in the audience group there will be only those people who like bikes, cars, etc. What kind of information do you want from the site, now you will put only those things on your site which are useful for the person who likes the car.

The structure or structure of the website is called its layout, while designing the layout, keeping in mind the height-width, position, etc of different sections of the website like header, sidebar, content, footer, etc., the structure is designed in such away. That we are able to present the information of our site to the user in the right way.

Whenever we design our website, we also have to take care of the color combination, you must have seen that a maximum of 3 or 4 colors are used in most of the websites so that the site looks more professional.

The color of the images, fonts, backgrounds, etc. to be used is selected according to the pre-decided color combination and the same combination is used in all the pages.

Nowadays it has become very easy to create a website, there are many such tools on the internet, with the help of which you can easily create your website without any programming.

But if you want to become a professional web designer, you want to design any kind of website, and you can understand not only the design but also all the functionality inside it, then for this, you have some programming skills. It is necessary to have

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



Read More Articles