使用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>

我想在每个tr隐藏最后一个td 。 td和tr没有任何类别，因此我们需要使用.eq进行选择。 并且还需要其他if函数，例如resize事件。 如果窗口大小调整为200，则隐藏最后一个td ；如果窗口大小调整为100，则隐藏最后两个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

好吧，如果您实际上想要标题中所述的第一个孩子，

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();