javascript - Jqueryを使用してすべてのtrのn:th td要素を非表示にします

Question

次のようなテーブルがあります。

<table Id="modules-mgr">
<tbody>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
<tr>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
<td>lorem ispium blok</td>
</tr>
</tbody>
</table>

tdすべての から最後に非表示にしたいtr。tdandにはクラスがないtrので、 を使用してそれらを選択する必要があります.eq。また、サイズ変更イベントなどのelse if関数も必要です。ウィンドウのサイズが 200 に変更されたtd場合は最後を非表示にし、ウィンドウのサイズが 100 に変更された場合は最後の 2 つを非表示にしますtd。ここで私がこれまでに行ったことですが、うまくいきませんでした。

jQuery(window).resize(function() {
var width=jQuery(window).width();
    if(width < 870) {
        jQuery('table#modules-mgr tr td').eq(10).hide()

    }
    /*elseif(width < 570) {

    }
    else {

    }*/
});

Answer 1

CSS のみ:

@media all and (max-width: 200px) {
    #modules-mgr td:last-child {display:none]
}
@media all and (max-width: 100px) {
    #modules-mgr td:nth-last-child(-n+2) {display:none]
}

Answer 2

タイトルにあるように nth-child が実際に必要な場合は、

jQuery('#modules-mgr td:nth-child(10)').hide();

暗黒時代に立ち往生していないブラウザの場合は、ストレート css と同じように行う必要があります。

#modules-mgr td:nth-child(10) {
    display: none;
}

（最後の要素だけが必要な場合は、他の回答を参照してください）

Answer 3

最後を非表示にしたい場合は、last()セレクターを使用できます。

// for last
$('#modules-mgr tr td').last().hide();
// for n-th element - 0-index based
$('#modules-mgr tr td').eq(n - 1).hide();

別：

// for last
$('#modules-mgr tr td:last').hide();
// for n-th element - 0-index based
$('#modules-mgr tr td:eq(n - 1)').hide();

Answer 4

jQuery('table#modules-mgr tr td').last().hide();