Question

I have a function that gets raw HTML to output to a table, but I want to take out the first three columns and put them in another div.

I am considering making a div on the page that is hidden, setting this div’s html to the raw HTML I get, and then using the selector syntax to strip it into each table’s div. Is there a way to do this without the intermediate faux-div to hold the raw HTML?

Answer 1

I’m not sure exactly why you’d want to do this, rather than arrange your data server-side, but one approach that works is:

$(document).ready(
    function(){
        $('table').click(
            function(){
                $('<table />').appendTo('#newTable').addClass('new');
                $('table').eq(0).find('tr td:first-child').each(
                    function(){
                        $(this).appendTo('.new').wrap('<tr></tr>');
                    });
            });
    });

With the (x)html:

<table>
    <tr>
        <td>1:1</td>
        <td>1:2</td>
        <td>1:3</td>
    </tr>
    <tr>
        <td>2:1</td>
        <td>2:2</td>
        <td>2:3</td>
    </tr>
    <tr>
        <td>3:1</td>
        <td>3:2</td>
        <td>3:3</td>
    </tr>
    <tr>
        <td>4:1</td>
        <td>4:2</td>
        <td>4:3</td>
    </tr>
</table>
<div id="newTable"></div>

JS Fiddle demo

The demo uses jQuery’s click() event, but that’s just to show it working interactively; it could certainly be placed straight into the DOM-ready/$(document).ready(function(){/* ... */}); event.

---

The above code would allow repeated clicks (each time moving the first ‘column’ into a new table), the edit removes that possibility using jQuery’s one(), giving the following jQuery:

$(document).ready(
    function(){
        $('table').one('click',
            function(){
                $('<table />').appendTo('#newTable').addClass('new');
                $('table').eq(0).find('tr td:first-child').each(
                    function(){
                        $(this).appendTo('.new').wrap('<tr></tr>');
                    });
            });
    });

JS Fiddle demo, featuring one().