How To Add Table Header Dynamically Using Javascript

In this article, we volition learn how to dynamically add together/remove rows from an HTML table using jQuery. Earlier reading this article, brand sure yous have some basic thought about jQuery. If not, you tin can learn it from the links mentioned below.

jQuery tutorials
jQuery Official API Docs

HTML lawmaking: Let us first past defining the basic HTML structure of the web page.

html

              <              torso              >            
                            <              div              course              =              "container pt-4"              >            
                            <              div              grade              =              "table-responsive"              >            
                            <              table              class              =              "table tabular array-bordered"              >            
                            <              thead              >            
                            <              tr              >            
                            <              th              grade              =              "text-center"              >Row Number</              th              >            
                            <              th              form              =              "text-center"              >Remove Row</              th              >            
                            </              tr              >            
                            </              thead              >            
                            <              tbody              id              =              "tbody"              >            
                            </              tbody              >            
                            </              table              >            
                            </              div              >            
                            <              button              class              =              "btn btn-dr. btn-primary"
                            id              =              "addBtn"              type              =              "push"              >            
                            Add together new Row            
                            </              button              >            
                            </              div              >            
              </              trunk              >            

Initially, the tabular array is empty and has no rows. We will start by adding rows dynamically inside the table body then see how to remove a row from the tabular array.

Adding a row:
To add a row, define a variable that keeps the count of the total number of that now exists in the table. Then nosotros will use the jQuery "click" consequence to discover a click on the add row button and and so employ the .append() method of jQuery to add a row in the tabular array. Each row element has been assigned an id Ri that nosotros volition afterward use to delete a row. Each element has a row index column and remove the button column. The code is as follows.

javascript

              var              rowIdx = 0;            
              $(              '#addBtn'              ).on(              'click'              ,                            function              () {            
                            $(              '#tbody'              ).append(`<tr id=              "R${++rowIdx}"              >            
                            <td class=              "row-alphabetize text-centre"              >            
                            <p>Row ${rowIdx}</p></td>            
                            <td class=              "text-center"              >            
                            <push button class=              "btn btn-danger remove"
                            type=              "push button"              >Remove</button>            
                            </td>            
                            </tr>`);            
              });            

Note: The `R${var}` is a way of concatenating a variable with a cord in the new JavaScript ES6 syntax.
Removing a row: Removing a row is a flake complicated. There are 2 problems. Firstly, as each row is existence added dynamically, nosotros cannot detect the click of a remove button directly past using the "click" jQuery event every bit it is a "direct" binding which will adhere the handler to already existing elements. It will not go bound to the hereafter elements. Secondly, when we delete a row, we will need to keep up the index, i.e., if we delete the 2nd row, the tertiary row becomes the second and hence we need the to alter the id and the row index text.
To tackle the first problem nosotros volition apply delegation and then we can handle the events of a dynamically added chemical element.
In gild to tackle the second problem, nosotros volition get all the rows next to the row where the remove button is clicked using the .nextAll() method of jQuery and then iterate across each of these elements to modify the row index and row id. The lawmaking is as follows:

javascript

              $(              '#tbody'              ).on(              'click'              ,                            '.remove'              ,                            part              () {            
                            var              child = $(              this              ).closest(              'tr'              ).nextAll();            
                            child.each(              function              () {            
                            var              id = $(              this              ).attr(              'id'              );            
                            var              idx = $(              this              ).children(              '.row-index'              ).children(              'p'              );            
                            var              dig = parseInt(id.substring(1));            
                            idx.html(`Row ${dig - i}`);            
                            $(              this              ).attr(              'id'              , `R${dig - 1}`);            
                            });            
                            $(              this              ).closest(              'tr'              ).remove();            
                            rowIdx--;            
              });            

This lawmaking can be modified in several ways according to the needs. For instance, you tin attempt to set the commencement row in the table, such that there always exists at to the lowest degree one row inside the tabular array trunk. 1 should non exist able to delete the row if the row count is i.

Final lawmaking: This following code is the combination of the above sections.

            <!DOCTYPE html>          
            <            html            >          
            <            head            >          
                        <            title            >test folio</            championship            >          
                        <            link            rel            =            "stylesheet"            href            =          
                        integrity            =          
            "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"          
                        crossorigin            =            "anonymous"            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            >          
                        $(certificate).ready(function () {          
                        // Denotes total number of rows          
                        var rowIdx = 0;          
                        // jQuery button click event to add together a row          
                        $('#addBtn').on('click', part () {          
                        // Adding a row within the tbody.          
                        $('#tbody').append(`<            tr            id            =            "R${++rowIdx}"            >          
                        <            td            class            =            "row-alphabetize text-center"            >          
                        <            p            >Row ${rowIdx}</            p            >          
                        </            td            >          
                        <            td            class            =            "text-center"            >          
                        <            button            class            =            "btn btn-danger remove"          
                        type            =            "button"            >Remove</            push            >          
                        </            td            >          
                        </            tr            >`);          
                        });          
                        // jQuery button click event to remove a row.          
                        $('#tbody').on('click', '.remove', function () {          
                        // Getting all the rows side by side to the row          
                        // containing the clicked button          
                        var child = $(this).closest('tr').nextAll();          
                        // Iterating across all the rows          
                        // obtained to change the index          
                        child.each(function () {          
                        // Getting <            tr            > id.          
                        var id = $(this).attr('id');          
                        // Getting the <            p            > inside the .row-index class.          
                        var idx = $(this).children('.row-index').children('p');          
                        // Gets the row number from <            tr            > id.          
                        var dig = parseInt(id.substring(1));          
                        // Modifying row index.          
                        idx.html(`Row ${dig - one}`);          
                        // Modifying row id.          
                        $(this).attr('id', `R${dig - ane}`);          
                        });          
                        // Removing the electric current row.          
                        $(this).closest('tr').remove();          
                        // Decreasing total number of rows past one.          
                        rowIdx--;          
                        });          
                        });          
                        </            script            >          
            </            head            >          
            <            trunk            >          
                        <            div            form            =            "container pt-4"            >          
                        <            div            class            =            "table-responsive"            >          
                        <            table            class            =            "table tabular array-bordered"            >          
                        <            thead            >          
                        <            tr            >          
                        <            th            class            =            "text-middle"            >Row Number</            th            >          
                        <            thursday            class            =            "text-center"            >Remove Row</            th            >          
                        </            tr            >          
                        </            thead            >          
                        <            tbody            id            =            "tbody"            >          
                        </            tbody            >          
                        </            table            >          
                        </            div            >          
                        <            button            grade            =            "btn btn-md btn-primary"
                        id            =            "addBtn"            type            =            "push"            >          
                        Add new Row          
                        </            button            >          
                        </            div            >          
            </            torso            >          
            </            html            >          

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You lot can acquire HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can larn CSS from the ground up by following this CSS Tutorial and CSS Examples.

jQuery is an open up source JavaScript library that simplifies the interactions between an HTML/CSS certificate, It is widely famous with it's philosophy of "Write less, exercise more".
You can learn jQuery from the ground upwardly by post-obit this jQuery Tutorial and jQuery Examples.