How To Dynamically Change Table Row Height Using Jquery And Html

In this commodity, we volition learn how to dynamically add/remove rows from an HTML table using jQuery. Earlier reading this article, make certain you have some basic idea well-nigh jQuery. If not, y'all tin can learn it from the links mentioned below.

jQuery tutorials
jQuery Official API Docs

HTML code: Permit the states start by defining the bones HTML construction of the web page.

html

              <              body              >            
                            <              div              class              =              "container pt-4"              >            
                            <              div              class              =              "table-responsive"              >            
                            <              table              class              =              "table table-bordered"              >            
                            <              thead              >            
                            <              tr              >            
                            <              th              class              =              "text-center"              >Row Number</              th              >            
                            <              th              grade              =              "text-eye"              >Remove Row</              th              >            
                            </              tr              >            
                            </              thead              >            
                            <              tbody              id              =              "tbody"              >            
                            </              tbody              >            
                            </              table              >            
                            </              div              >            
                            <              push              class              =              "btn btn-md btn-primary"
                            id              =              "addBtn"              type              =              "button"              >            
                            Add new Row            
                            </              button              >            
                            </              div              >            
              </              body              >            

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

Adding a row:
To add a row, define a variable that keeps the count of the total number of that at present exists in the tabular array. Then nosotros volition use the jQuery "click" event to notice a click on the add row push button and then utilise the .append() method of jQuery to add a row in the table. Each row element has been assigned an id Ri that nosotros volition later use to delete a row. Each element has a row alphabetize cavalcade and remove the button cavalcade. The code is equally follows.

javascript

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

Note: The `R${var}` is a style of concatenating a variable with a string in the new JavaScript ES6 syntax.
Removing a row: Removing a row is a flake complicated. In that location are two issues. Firstly, equally each row is existence added dynamically, we cannot observe the click of a remove button directly by using the "click" jQuery issue every bit it is a "straight" binding which will attach the handler to already existing elements. Information technology volition not get bound to the future elements. Secondly, when we delete a row, we will need to go on up the index, i.due east., if we delete the second row, the 3rd row becomes the second and hence we need the to change the id and the row index text.
To tackle the commencement problem we will employ delegation and then we tin can handle the events of a dynamically added element.
In club to tackle the second trouble, we volition go all the rows next to the row where the remove push button is clicked using the .nextAll() method of jQuery and then iterate across each of these elements to change the row alphabetize and row id. The lawmaking is as follows:

javascript

              $(              '#tbody'              ).on(              'click'              ,                            '.remove'              ,                            function              () {            
                            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 - 1}`);            
                            $(              this              ).attr(              'id'              , `R${dig - 1}`);            
                            });            
                            $(              this              ).closest(              'tr'              ).remove();            
                            rowIdx--;            
              });            

This code can be modified in several means according to the needs. For example, you can attempt to fix the first row in the table, such that there always exists at to the lowest degree 1 row inside the tabular array body. One should not be able to delete the row if the row count is one.

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

            <!DOCTYPE html>          
            <            html            >          
            <            head            >          
                        <            title            >test folio</            title            >          
                        <            link            rel            =            "stylesheet"            href            =          
                        integrity            =          
            "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"          
                        crossorigin            =            "bearding"            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            src            =          
                        </            script            >          
                        <            script            >          
                        $(certificate).set(part () {          
                        // Denotes total number of rows          
                        var rowIdx = 0;          
                        // jQuery button click event to add together a row          
                        $('#addBtn').on('click', function () {          
                        // Calculation a row inside the tbody.          
                        $('#tbody').append(`<            tr            id            =            "R${++rowIdx}"            >          
                        <            td            grade            =            "row-alphabetize text-centre"            >          
                        <            p            >Row ${rowIdx}</            p            >          
                        </            td            >          
                        <            td            grade            =            "text-center"            >          
                        <            push            class            =            "btn btn-danger remove"          
                        type            =            "button"            >Remove</            button            >          
                        </            td            >          
                        </            tr            >`);          
                        });          
                        // jQuery push 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 kid = $(this).closest('tr').nextAll();          
                        // Iterating across all the rows          
                        // obtained to change the index          
                        child.each(part () {          
                        // Getting <            tr            > id.          
                        var id = $(this).attr('id');          
                        // Getting the <            p            > within the .row-index form.          
                        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 - 1}`);          
                        // Modifying row id.          
                        $(this).attr('id', `R${dig - 1}`);          
                        });          
                        // Removing the electric current row.          
                        $(this).closest('tr').remove();          
                        // Decreasing total number of rows past 1.          
                        rowIdx--;          
                        });          
                        });          
                        </            script            >          
            </            head            >          
            <            torso            >          
                        <            div            form            =            "container pt-4"            >          
                        <            div            class            =            "table-responsive"            >          
                        <            tabular array            class            =            "tabular array table-bordered"            >          
                        <            thead            >          
                        <            tr            >          
                        <            th            form            =            "text-center"            >Row Number</            th            >          
                        <            th            class            =            "text-centre"            >Remove Row</            th            >          
                        </            tr            >          
                        </            thead            >          
                        <            tbody            id            =            "tbody"            >          
                        </            tbody            >          
                        </            table            >          
                        </            div            >          
                        <            push            class            =            "btn btn-doc btn-primary"
                        id            =            "addBtn"            blazon            =            "button"            >          
                        Add new Row          
                        </            push button            >          
                        </            div            >          
            </            trunk            >          
            </            html            >          

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can larn HTML from the footing 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 learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

jQuery is an open source JavaScript library that simplifies the interactions betwixt an HTML/CSS document, It is widely famous with it's philosophy of "Write less, practise more than".
You tin can learn jQuery from the footing up by following this jQuery Tutorial and jQuery Examples.