I want to clone row using Data Table with empty data and increment on serial number. This is my code.
<table id="tabledetail">
<thead>
<tr>
<th>S.#</th>
<th>Name</th>
<th>Type</th>
<th>Action <i class="btn btn-primary fa fa-plus rowAdd"></i></th>
</tr>
</thead>
<tbody>
<?php $sNo = 1; ?>
<?php
if(!empty($recordsDetail))
{
foreach($recordsDetail as $detail)
{
?>
<tr>
<td><?php echo $sNo; ?></td>
<td><input type="text" id="name" name="name[]" class="form-control"></td>
<td>
<select class="form-control" id="type" name="type[]">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</td>
<td><i class="btn btn-primary fa fa-plus rowAdd"></i></td>
</tr>
<?php $sNo++ ?>
<?php
}
}
?>
</tbody>
</table>
<script>
function addTableRow(jQtable) {
var $row = jQtable.find("tr:last"),
$clone = $row.clone().appendTo(jQtable);
$clone.find('[id]').attr('id', function(i, id) {
return 10 + +id;
});
$clone.find('label').remove();
$clone.find('input').each(function() {
})
}
$('.rowAdd').click(function() {
//addTableRow($('#tabledetail'));
var table = $('#tabledetail').DataTable({
aaSorting: []
});
table.row.add([]).draw();
});
$(function() {
$('table').on('click', 'tr a', function(e) {
e.preventDefault();
$(this).parents('tr').remove();
});
});
</script>
using function addTableRow its working but i need it with data table
this is reference link Adding row dynamically - append row from above
Try This
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table id="tabledetail">
<thead>
<tr>
<th>S.#</th>
<th>Name</th>
<th>Type</th>
<th>Action <i class="btn btn-primary fa fa-plus rowAdd"></i></th>
</tr>
</thead>
<tbody>
<?php $sNo = 1;
if(!empty($recordsDetail))
{
foreach($recordsDetail as $detail)
{
?>
<tr>
<td><?php echo $sNo; ?></td>
<td><input type="text" id="name" name="name[]" class="form-control"></td>
<td>
<select class="form-control" id="type" name="type[]">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</td>
</tr>
<?php $sNo++ ?>
<?php
}
}
?>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<i class="btn btn-primary fa fa-plus rowAdd"></i>
</td>
</tr>
</tfoot>
</table>
<script>
$('.rowAdd').click(function() {
var trLastChild = $("table#tabledetail tbody tr:last-child" );
var cloneChild = trLastChild.clone();
var count=parseInt(trLastChild.find('td:first-child').html());
cloneChild.find("td:first-child").html(count+1);
$('table#tabledetail tbody').append(cloneChild);
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.