Question

This HTML markup is fixed and can not be modified directly:

<table>
    <tbody>
        <tr>
            <td id="LeftPanel">A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </tbody>
</table>

I’m trying to use jQuery to change the markup to this:

<table>
    <tbody>
        <tr>
            <td id="LeftPanel">A</td>
            <td>C</td>
            <td id="RightPanel">D</td>
        </tr>
    </tbody>
</table>

1. The TD directly after #LeftPanel needs to be removed (B).
2. A new TD with the id #RightPanel needs to be added to the end of the table (D).

Note that the full source has many tables on the same level so the only reference point to work with is td#LeftPanel. The A B C D is just there for reference and can’t be used as part of the script (the full source has a lot of HTML in each TD, including nested tables).

How can I accomplish this?

Answer 1

http://api.jquery.com/category/traversing/

$('#LeftPanel')
        .next()
        .remove()
        .end()
        .parent()
        .append('<td id="rightPanel">D</td>');

http://jsfiddle.net/msKvR/