Question

I am really confused with the behavior. Any help will be appreciated on this. I have a simple table and it is behaving differently though using the same JQuery call.

<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><script>$('table.PrintTable >tbody>tr>td').slice(-2).remove();</script>

The above JQuery removes the last two columns which is expected.

But, if I changed the code to:-

  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();
    }

 getBoby($('table.PrintTable'))

The above code displays only the last column. Why is it so? I hop I am able to mention my problem properly. Any help will be appreciated

Answer 1

Based on your comment, it seems you want a duplicate of the original, but without the last two columns.

Do this:

function getBody(element) {
    var divider=2;
    var newTable = element.clone();
    newTable.children('tbody').children('tr').children('td').slice(-2).remove();
    return $('<div>').append(newTable).html();
}

getBody($('table.PrintTable'));

In your code, newTable was referencing the portion of the clone that you sliced and removed. Not the main cloned table.