jquery - 使用 jQuery 在表中删除和插入 td

Question

这个 HTML 标记是固定的，不能直接修改：

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

我正在尝试使用 jQuery 将标记更改为：

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

1. #LeftPanel 之后的 TD 需要删除 (B)。
2. 需要将 ID 为 #RightPanel 的新 TD 添加到表 (D) 的末尾。

请注意，完整源代码在同一级别上有许多表，因此唯一要使用的参考点是 td#LeftPanel。ABCD 仅供参考，不能用作脚本的一部分（完整的源代码在每个 TD 中都有很多 HTML，包括嵌套表）。

我怎样才能做到这一点？

Answer 1

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

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

http://jsfiddle.net/msKvR/

Answer 2

$('td#LeftPanel ~ td ').remove(); // remove b
$('td#LeftPanel ~ td ').append('<td id="RightPanel">D</td>'); // add d

Answer 3

如果您有多个表，请不要使用重复的 ID

改为这样做：

JS：

$('.LeftPanel')
        .next()
        .remove()
        .end()
        .parent()
        .append('<td class="RightPanel">D</td>');

HTML：

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