0

この 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 があります)。

どうすればこれを達成できますか?

4

3 に答える 3

3

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

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

http://jsfiddle.net/msKvR/

于 2013-01-09T02:21:06.393 に答える
0 
$('td#LeftPanel ~ td ').remove(); // remove b
$('td#LeftPanel ~ td ').append('<td id="RightPanel">D</td>'); // add d
于 2013-01-09T02:17:51.580 に答える
0

複数のテーブルがある場合は、重複する 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>
于 2013-01-09T02:20:20.220 に答える