Question

I have a table:

<div id="menu">
    <table cellspacing="0" cellpadding="0" width="930">
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td class="spacer"></td>
                <td>
                    2
                </td>
                <td class="spacer"></td>
                <td>
                    3
                </td>
                <td class="spacer"></td>
                <td>
                    4
                </td>
                <td class="spacer"></td>
                <td>
                    6
                </td>
                <td class="spacer"></td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
</div>

And I need to split this table into two tables.
Like this:

<div id="menu">
    <table cellspacing="0" cellpadding="0" width="930">
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td class="spacer"></td>
                <td>
                    2
                </td>
                <td class="spacer"></td>
                <td>
                    3
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    4
                </td>
                <td class="spacer"></td>
                <td>
                    6
                </td>
                <td class="spacer"></td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
</div>

So I did this:
It finds the middle spacer and replaces that with some ending tags and start tags.

var menuItems = jQuery('#menu table tr td.spacer').size();
var middle = Math.floor(menuItems/2);
jQuery('#menu table tr').children('td.spacer').each(function(index) {
    if(index == middle) {
        jQuery(this).replaceWith('</tr></tbody></table><table><tbody><tr>');
    }
});

But jQuery doesn’t seem to like that… Is it possible to do this? Split an element?

Answer 1

try this:

$('<table id="sec" cellspacing="0" cellpadding="0" width="930"><tbody><tr></tr></tbody></table>').insertAfter('table');

var s = $('#menu td').size() / 2;

$('#menu td').each(function(){
    if($(this).index() > s) {
      $(this).clone(true).appendTo("#sec tr");
      $(this).remove()
    }
})    

http://jsfiddle.net/39pLc/4/