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>

#LeftPanel之后的TD需要被删除（B）。
需要将一个ID为#RightPanel的新TD添加到表格末尾（D）。

请注意，完整源在同一级别上有许多表，因此唯一可以使用的参考点是td＃LeftPanel。 A B C D仅供参考，不能用作脚本的一部分（完整的源在每个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>

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

3 个答案: