0

以下のようなhtmlテーブルがあります。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>

tdをクリックすると、次の4つのtdの色を変更しています。そのために、以下のようにjqueryで実行しました。

$(this).nextAll("td").slice(0, 4).addClass("selected");

上記のコードは、1 番目の TD をクリックしてさらに 4 つの TD を選択すると機能しますが、4 番目の TD をクリックすると 5 番目の TD のみが選択されます。次の行でも別の 3 つの td を選択する必要があります。

どうすればこれを修正できますか教えてください。

4

3 に答える 3

2 
var $tds = $('table td').click(function(){
    var idx = $tds.index(this);
    $tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})

デモ:フィドル

于 2013-09-13T09:25:13.343 に答える