Add Row (Clone)

Today, I will share a simple way to implement cloning and removing tr dynamically and how to keep the last tr without removing it.

*Requirements Below: *

1. A Selector to append TR
2. add/remove selector class

<table>



<h2>
  
  
  JS Code
</h2>



<pre class="brush:php;toolbar:false">$(document).ready(function() {
        $(document).on('click', '.addTr', function() {
            let $clone = $(this).closest('tr').clone();
            $clone.find('input').val('');

            $('.productServicesTbody').append($clone);
        });

        $(document).on('click', '.removeTr', function() {
            if ($('.productServicesTbody tr').length > 1) {
                $(this).closest('tr').remove();
            }
        });
    });

Here .addTr is an add new tr button selector. And .removeTr is an add new tr button selector.

Please, let me know your queries in the comment section.

HappyCoding #Js #jQuery

The above is the detailed content of Add Row (Clone). For more information, please follow other related articles on the PHP Chinese website!