1 回答

TA貢獻1799條經驗 獲得超6個贊
你已經完成了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 />元素沒有結束標記。
添加回答
舉報