Home/ Questions/Q 3979336
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T05:09:27+00:00

I have two separate table, I want to merge into a single table using

  • 0

I have two separate table, I want to merge into a single table using JQuery. But the out put I am seeing is not the correct one. Any help regarding this will be appreciated.

Source Table

<html>
<table class="left-column">
<tbody>
    <tr>
        <td>Name
        </td>
    </tr>
    <tr>
        <td>Age
        </td>
    </tr>
</tbody>
 </table>
 <table class="right-column">
<tbody>
    <tr>
        <td>Andy
        </td>
    </tr>
    <tr>
        <td>30
        </td>
    </tr>
</tbody>
</table>
</html>

Target Table

<html>
<table>
    <tr>
        <td>
            <table class="left-column">
                <tbody>
                    <tr>
                        <td>Name
                        </td>
                    </tr>
                    <tr>
                        <td>Age
                        </td>
                    </tr>
                </tbody>
             </table>
        </td>
        <td>
            <table class="right-column">
                    <tbody>
                    <tr>
                        <td>Andy
                        </td>
                    </tr>
                    <tr>
                        <td>30
                        </td>
                    </tr>
                </tbody>
             </table>
        </td>
    </tr>
</table>
</html>

Jquery Code snippet

var leftTable=$('table.left-column').clone(); 
var rightTable=$('table.right-column').clone(); 
var newTable= $('div').append('<table><tr><td>')
    .append(leftTable).append('</td><td>')
    .append(rightTable).append('</td></tr></table>')
    .html(); 
return newTable;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about something like this (jsFiddle). This gives exactly the output you’ve requested in 3 short lines of code. (NOTE, this code actually MOVES the individual tables into the joined table instead of copying/cloning them.

    $('div').html('<table border=1><tr><td id="cell1"></td><td id="cell2"></td></tr></table>');
$('#cell1').html($('.left-column').clone());
$('#cell2').html($('.right-column').clone());
    • 0