How to add Row into dynamic html table?

Question

I have created one div that is not visible, in that div main table is hidden and I'm cloning that table into another div. that div id is main-div. I want to add a row into that newly generated table? how to append rows using jQuery? generate table function, delete table function, and remove row function are in working condition. adding new row using javascript or Jquery which better way to handle? any hint?

 // ==================== // // Add aggregate Table// // ==================== // var aggTableNum = 0; $('.addAggregatorCompo').click(function (e) { const originTable = document.getElementById('aggregator-table'); let newTable = originTable.cloneNode(true); newTable.id = 'newAggTable' + ++aggTableNum; newTable.querySelectorAll('input').forEach((element) => { element.value = ''; }); $('#main-div').append(newTable); }); // ==================== // // Delete Component // // ==================== // $('#main-div').on('click', '.delete-component', function (e) { e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form this.closest('table').remove(); }); // ==================== // // Delete Records// // ==================== // $('#main-div').on('click', '.delete-record', function () { $('table tbody').find('input[name="record"]').each(function () { if ($(this).is(':checked')) { $(this).parents('tr').remove(); } }); }); // ==================== // // Add Aggregate records // // ==================== // $('#main-div').on('click', '.add-record', function () { $('<tr>').append($('<td>').append('input')).append($('<td>').append('text2')).append($('<td>').append('text3')).append($('<td>').append('text4')); });

 #aggregator-table { display: none; } table { border-collapse: collapse; margin: 1em; } thead { background-color: lightblue; } td, th { border: solid grey 1px; padding: 1em; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button style="margin: 1%" class="addAggregatorCompo">Add Table</button> <table id="aggregator-table" class="component-base"> <thead> <th colspan="6">Aggregator</th> <tr> <th> Select</th> <th> Column 1 </th> <th> Column 2 </th> <th> Column 3 </th> <th> Column 4 </th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="record"></td> <td> <input id='column1'> </input> </td> <td><input id="column2"> </input></td> <td> <input id="column3"> </input> </td> <td> <input id="4"> </input> </td> </tr> <tr> <td> <button style="margin: 1%" class="add-record">add Record</button> </td> <td> <button class="delete-component" style="margin: 1%">Delete Table </button> </td> <td> <button class="delete-record" style="margin: 1%">Delete Record </button> </td> </tr> </tbody> </table> <div class="generate-div" id="main-div"></div>

jsFiddle - > https://jsfiddle.net/shreekantbatale2/h2sv1q9p/

Answer 1

You've done the work of creating the new tr in memory. All you need to do is add it to the DOM. This can be achieved using appendTo() :

$('#main-div').on('click', '.add-record', function() {
  let $tbody = $(this).closest('tbody');
  $('<tr>')
    .append($('<td>').append('input'))
    .append($('<td>').append('text2'))
    .append($('<td>').append('text3'))
    .append($('<td>').append('text4'))
    .appendTo($tbody);
});

 // ==================== // // Add aggregate Table// // ==================== // var aggTableNum = 0; $('.addAggregatorCompo').click(function(e) { const originTable = document.getElementById('aggregator-table'); let newTable = originTable.cloneNode(true); newTable.id = 'newAggTable' + ++aggTableNum; newTable.querySelectorAll('input').forEach((element) => { element.value = ''; }); $('#main-div').append(newTable); }); // ==================== // // Delete Component // // ==================== // $('#main-div').on('click', '.delete-component', function(e) { e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form this.closest('table').remove(); }); // ==================== // // Delete Records// // ==================== // $('#main-div').on('click', '.delete-record', function() { $('table tbody').find('input[name="record"]').each(function() { if ($(this).is(':checked')) { $(this).parents('tr').remove(); } }); }); // ==================== // // Add Aggregate records // // ==================== // $('#main-div').on('click', '.add-record', function() { let $tbody = $(this).closest('table').find('tbody'); $('<tr>').append($('<td>').append('input')).append($('<td>').append('text2')).append($('<td>').append('text3')).append($('<td>').append('text4')).appendTo($tbody); });

 #aggregator-table { display: none; } table { border-collapse: collapse; margin: 1em; } thead { background-color: lightblue; } td, th { border: solid grey 1px; padding: 1em; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button style="margin: 1%" class="addAggregatorCompo">Add Table</button> <table id="aggregator-table" class="component-base"> <thead> <th colspan="6">Aggregator</th> <tr> <th>Select</th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="record"></td> <td><input id="column1" /></td> <td><input id="column2" /></td> <td><input id="column3" /></td> <td><input id="4" /></td> </tr> </tbody> <tfoot> <tr> <td> <button style="margin: 1%" class="add-record">add Properties</button> </td> <td> <button class="delete-component" style="margin: 1%">Delete Table </button> </td> <td> <button class="delete-record" style="margin: 1%">Delete Record </button> </td> </tr> </tfoot> </table> <div class="generate-div" id="main-div"></div>

Also note in your HTML that <input /> elements do not have a closing tag.