Hide n:th td element of every tr using Jquery

Question

I have a table like this:

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

I want to hide last td from every tr . there is not any class for the td and tr , so we need to select them using .eq . And also want a else if function, like resize event. if windows resize to 200 then hide last td , if window resize to 100 hide last two td . here what i have done so far, but dint worked;

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 only:

@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

Well if you actually want nth-child like it says in the title,

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

should do it the same as it would in straight css for those browsers which aren't stuck in the dark ages:

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

(If you just want the last element, see the other answers)

Answer 3

If you want to hide the last you can use the last() selector:

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

Alternative:

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