CODEWITHSUNDEEP
jquery
Jenny
Jenny

Reputation: 919

Edit table tags using jquery

I am working with software to create a site, I am unable to directly edit the HTML. This is a table where information is pulled in as teams register/receive donations. I would like to use tablesorter.js to sort the information by the donation amount but this requires using the tags for the header, the table that is created by the software does not use this tag, see below:

<table width="100%" bgcolor="#003399" cellspacing="0" cellpadding="1" border="0">
            <tbody><tr><td>
                <table width="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="2" border="0">
                    <tbody><tr bgcolor="#003399">

                        <td colspan="4" class="white"><b>Click on the Group for more information: </b></td>

                    </tr>

                        <tr bgcolor="white"><td align="center" colspan="4"><img src="#">&nbsp;Indicates Group is accepting new members.</td></tr>

                    <tr bgcolor="#eeeeee">
                        <td>&nbsp;</td>
                        <td><b>Group Name</b></td>
                        <td><b>Group Captain</b></td>

                        <td><b>Donation Total</b></td>

                    </tr>
                    <tr bgcolor="#ffffff"><td></td><td><a href="#">test1</a></td><td>test test</td><td>$20.00</td></tr><tr bgcolor="#eeeeee"><td></td><td><a href="#">test2</a></td><td>test test</td><td>$50.00</td></tr>
        <tr bgcolor="#ffffff"><td align="center" colspan="4"><img src="#">&nbsp;Indicates Group is accepting new members from the public.</td></tr>                 

                </tbody></table>
            </td></tr>
        </tbody></table>

See JSfiddle here: http://jsfiddle.net/jelane20/kt8jzg9e/1/

What I need to do: starting with "Group Name" and anything after, this information needs to go into it's own table utilizing and tags, after the the rest of the table goes into please see below:

<table><thead><th>Group Name</th><th>Group Captain</th><th>Donation Total</th></thead>
<tbody><tr><td>test1</td><td>test2</test2> . . . </tbody></table>

Any help would be greatly apprecieated! Thanks in advance!

Upvotes: 0

Views: 48

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Based on objective outlined in comments you can do something like this:

var $existTable= $('table td table');

var $newTable = $('<table id="newTable"><thead></thead><tbody></tbody></table>');
$newTable.find('thead').append($existTable.find('tr').eq(2));
$newTable.find('tbody').append($existTable.find('tr:gt(1)'));
$existTable.parent().append( $newTable );


$newTable.tablesorter();

DEMO

Upvotes: 1

Related Questions