如何將 Row 添加到動態 html 表中？

Question

我創建了一個不可見的 div，該 div 主表被隱藏，我正在將該表克隆到另一個 div 中。 該div id is main-div. 我想在新生成的表中添加一行？ 如何使用 jQuery 行 append 行？ 生成表 function，刪除表 function，刪除行 function 處於工作狀態。 使用 javascript 或 Jquery 添加新行哪種更好的處理方式？ 任何提示？

 // ==================== // // 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

您已經完成了在 memory 中創建新tr的工作。 您需要做的就是將其添加到 DOM。 這可以使用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>

另請注意，在您的 HTML 中， <input />元素沒有結束標記。