使用jQuery从HTML删除表格

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....

Answer 1

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.

Answer 2

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.