Merge Tables Using JQuery

by
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:

merge tables using jquery

click here to See Code in Action

Leave a Comment