Demo
HTML Table
Languages | Expert Names | Country | Options |
---|---|---|---|
HTML | Code With Mark | USA | Clone | Add New | Delete |
CSS | Francisco Chang | Mexico | Clone | Add New | Delete |
Javascript | Roland Mendel | Austria | Clone | Add New | Delete |
jQuery | Helen Bennett | UK | Clone | Add New | Delete |
PHP | Yoshi Tannamuri | Canada | Clone | Add New | Delete |
Node JS | Giovanni Rovelli | Italy | Clone | Add New | Delete |
Clone Last Row And Add At End
HTML Table
<div style="padding-left: 50px;padding-right: 50px;padding-top:100px;" class="container">
<h2 class="text-center">HTML Table</h2>
<table class="table table-dark table-striped table-hover tbl_code_with_mark">
<tr>
<th>Languages</th>
<th>Expert Names</th>
<th>Country</th>
<th>Options</th>
</tr>
<tr>
<td>HTML</td>
<td>Code With Mark</td>
<td>USA</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
<tr>
<td>CSS</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
<tr>
<td>Javascript</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
<tr>
<td>jQuery</td>
<td>Helen Bennett</td>
<td>UK</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
<tr>
<td>PHP</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
<tr>
<td>Node JS</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td>
<span class="btn btn-sm btn-success btn_row_below_clone">Clone</span> |
<span class="btn btn-sm btn-success btn_row_below_new">Add New</span> |
<span class="btn btn-sm btn-danger btn_row_delete">Delete</span>
</td>
</tr>
</table>
<div class="text-center">
<span class="btn btn-sm btn-primary btn_row_add_below_end"> Clone Last Row And Add At End</span>
</div>
</div>
Javascript
<script>
$(document).ready(function($)
{
//--->add row at the end > start
$(document).on('click',".btn_row_add_below_end", function(e)
{
var tableBody = $(document).find('.tbl_code_with_mark').find("tbody");
var trLast = tableBody.find("tr:last");
var trNew = trLast.clone();
trLast.after(trNew);
});
//--->add row at the end > end
//--->current row > new > start
$(document).on('click',".btn_row_below_new", function(e)
{
var r = $(this).closest('tr').clone();
$.each(r.find('td'), function(i1,v1)
{
//clear all data/value in td/cell
$(this).html('');
});
$(this).closest('tr').after(r);
});
//--->current row > new > end
//--->current row > clone > start
$(document).on('click',".btn_row_below_clone", function(e)
{
var r = $(this).closest('tr').clone();
$(this).closest('tr').after(r);
});
//--->current row > clone > end
//--->current row > delete > start
$(document).on('click',".btn_row_delete", function(e)
{
var r = $(this).closest('tr').remove();
});
//--->current row > delete > end
});
</script>