Merge Tables Using JQuery
In Below Example We will See how to Merge Tables Using JQuery. The Code can be Modified Accordingly if There are More Than Two Tables
Code to Merge Tables Using JQuery:
<html>
<head>
<title>Merge Tables Using JQuery</title>
<script type="text/javascript" src="jquery.com/jquery-1.8.2.js"></script>
<script>
$(function() {
$('#btnMerge').click(function() {
$('#table3').html($('#table1').html());
$('#table3 > tbody:last').append($('#table2 > tbody').html());
})
})
</script>
</head>
<body>
<div style="float:left; margin-top:10%; margin-left:30%;">
<div>
<b>First Table</b>
<table id="table1" border="1" cellspacing="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top:20px;">
<b>Second Table</b>
<table id="table2" border="1" cellspacing="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>30</td>
</tr>
<tr>
<td>Mark</td>
<td>Gates</td>
<td>94</td>
</tr>
<tr>
<td>Johny</td>
<td>Depp</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top:20px;">
<input type="button" id="btnMerge" value="Click Here to Merge"/>
</div>
</div>
<div style="float:right; margin-top:13%; margin-right:35%;">
<table id="table3" border="1" cellspacing="1">
</table>
<div>
</body>
</html>
output:
click here to See Code in Action