JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<table class="PrintTable">
    <tr>
      <td>
        <table>
            <thead>
                <tr><th>Type Of Transaction</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                </tr>
                <tr>
                    <td>Age</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2006</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Andi</td>
                </tr>
                <tr>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
      </td>
      <td>
        <table>
            <thead>
                <tr><th>2007</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>tom</td>
                </tr>
                <tr>
                    <td>26</td>
                </tr>
            </tbody>
        </table>
      </td>
     </tr>
</table>
<input type="button" id="step-1" value="Step 1" />
<input type="button" id="step-2" value="Step 2" />

CSS

table {
    border: 1px solid;
}
th {
    background-color: #CCC;
}
td,th {
    padding: 10px 10px;;
    width: 175px;
}

JavaScript

$('#step-1').click(function(){
    $('table.PrintTable >tbody>tr>td').slice(-2).remove();
});

function getBody(element)
{
    var divider=2;
    var originalTable=element.clone();
    var newTable = ($(originalTable).children('tbody').children('tr').children('td')).slice(-1).remove();
    return $('<div>').append(newTable).html();
}
$('#step-2').click(function(){
    $('body').append(getBody($('table.PrintTable')));
});