Remove tables from HTML using jQuery

Question

I've got many chunks of HTML coming into my app which I have no control over. They contain tables for layout, which I want to get rid of. They can be complex and nested.

What I want is to basically extract the HTML content from the tables, so that I can inject that into other templates in the app.

I can use jQuery or plain JS only, no server side trickery.

Does anyone know of a jQuery plugin of good tip that will do the job?

Littm - I mean to extract content from the td tags essentially. I want no trace of table left in the code when it's done. Thanks!

Here's an example of the type of HTML in question. It all comes in via XHR from some ancient application so I have no control over the markup. What I want is to get rid of the tables completely, leaving just the rest of the HTML or other text content.

<table>
    <tr><td colspan="4"></td></tr>
    <tr>
        <td width="1%"></td>
        <td width="40%" style="padding-left: 15px">
        <p>Your access level:  <span>Total</span></p>
        </td>
        <td width="5%">
            <table><tr><td><b>Please note</b></td></tr></table>
        </td>
        <td width="45%" style="padding-left: 6px" valign="top"><p>your account</p></td>
    </tr>
    <tr><td colspan="4">&nbsp;</td></tr>
    <tr>
        <td width="1%"></td>
        <td width="40%" style="padding-left: 15px">
            <table>
                <tr>
                    <td align="right">Sort Code:  </td>
                    <td align="center"><strong>22-98-21</strong></td>
                </tr>
                <tr>
                    <td align="right">Account Number:  </td>
                    <td><strong>1234959</strong></td>
                </tr>
            </table>
        </td>
        <td width="5%"></td>
        <td width="45%" style="padding-left: 6px">Your account details for</td>
    </tr>
</table>

I've tried;

var data = ""
$("td").each(function(){
  data += $(this).html()
});
$("article").append(data);
$("table").remove();

But var data still contains nested td tags. I'm no JS expert so I'm not sure what else to try....

When you mean content, does it include the html tags like <tr> and <td>, or just the content inside the <td> tags? — Littm
– Littm, Commented Sep 24, 2012 at 9:50
Could you include some of your HTML "chunks"? Have you tried something so far? — ibtarek
– ibtarek, Commented Sep 24, 2012 at 9:54

Littm · Accepted Answer · 2012-09-24 11:04:45Z

Let's suppose that you have X number of tables.

In order to extract all the content information from these, you could try something like this:

// Array containing all the tables' contents
var content = [];

// For each table...
$("table").each(function() {

    // Variable for a table
    var tb = [];
    $(this).find('tr').each(function() {

        // Variable for a row
        var tr = [];

        $(this).find('td').each(function() {
            // We push <td> 's content
            tr.push($(this).html());
        });

        // We push the row's content            
        tb.push(tr);
    });
    // We push the table's content
    content.push(tb);
});

So for instance, if we have the following 2 tables:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>A</td>
    </tr>
</table>

<table>
    <tr>
        <td>r1</td>
        <td>r2</td>
        <td>r3</td>
    </tr>
    <tr>
        <td>rA</td>
        <td>rB</td>
    </tr>
    <tr>
        <td>rP</td>
    </tr>
</table>

The array content will be something like this:

content = [ [ [1, 2], [A] ] ] , [ [r1, r2, r3], [rA, rB], [rP] ] ]
            \_______________/   \______________________________/
                 1st table                2nd table

and if you want to access the first table, you'll just have to access content[0] for instance.

Now, let's suppose that you have a DIV, with and id my_div, and that you want to output some table content in it.

For example, let's suppose that you only want to have the 1st table only. Then, you would do something like this:

// Note: content[0] = [[1, 2], [A]]

var to_print = "<table>";

for(var i=0; i<content[0].length; i++) {
    to_print += "<tr>";     
    for(var j=0; j<content[0][i].length; j++)       
        to_print += "<td>"+ content[0][i][j] +"</td>";              

    to_print += "</tr>";        
}

to_print += "</table>";

$("#my_div").html(to_print);

which will give you something like this:

<div id="my_div">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>A</td>
        </tr>
    </table>
</div>

Hope this helps.

elboletaire · Accepted Answer · 2012-09-24 10:22:22Z

0

Edit: You should create a recursive function to do that.

Simply create you function that gets "td"'s as a value:

function searchTexts(td) {
     if (td.find("td")) {
           searchTexts(td.find("td"));
     }
     td.each(function(){
         data += $(this).html()
         $(this).remove(); // remove it for avoiding duplicates
     });
}

Then call it passing a jQuery object to the function.

edited Sep 24, 2012 at 10:22

answered Sep 24, 2012 at 9:48

elboletaire

5,4272 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Remove tables from HTML using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related