CODEWITHSUNDEEP
javascriptjquery
user1289939
user1289939

Reputation:

Hide n:th td element of every tr using Jquery

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 {

    }*/
});

Upvotes: 0

Views: 2103

Answers (4)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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

Upvotes: 0

moopet
moopet

Reputation: 6185

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)

Upvotes: 1

Man Programmer
Man Programmer

Reputation: 5356

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

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

Upvotes: 3

Related Questions