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/

The section commented as // Add Aggregate records // already adds a row to table. Add: .appendTo('#main-div'); at the end. — zer00ne
– zer00ne, Commented Apr 27, 2020 at 19:28
That function is not working i want to add record same as first row — Shree Batale
– Shree Batale, Commented Apr 27, 2020 at 19:31

Rory McCrossan · Accepted Answer · 2020-04-27 19:35:18Z

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.

I want to add row same as the first row next to the first row this answer is working but the row is appending to the next to the button row
Assuming I've understood what that means, put the buttons in a tfoot element to separate them from the main table data. I've updated the answer.
An actual input elemenet? append() it, as you do the text.
.append($('<td>').append('<input type="text" value="lorem ipsum" />'))

Collectives™ on Stack Overflow

How to add Row into dynamic html table?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related