Change td class on click with javascript doesn't work

Question

tried to apply this answer to make change the class of the cells in my table on click, yet it doesn't work :(

$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
})

My example code in jsfiddle is here..

Could someone take a short look and point what to change?

I am trying to make font red and change background image of clicked cell, other cells leaving with (or returning to) grey font and default backround image.

Thank you in advance!

Valdas

Works for me jsfiddle.net/2TYyC and in your fiddle you are ussing mootools instead of jQuery. — Wilfredo P
– Wilfredo P, Commented Jul 29, 2014 at 10:44
in your fiddle you haven't added jQuery. Add jQuery and it'll work — Mritunjay
– Mritunjay, Commented Jul 29, 2014 at 10:44
It is working check jsfiddle.net/64QpR/138/,and You did not include Jquery — Balachandran
– Balachandran, Commented Jul 29, 2014 at 10:46
Thank you, it works! In jsfiddle.. yet it still doesn't work on my website.. :( — Valdas Vėgėlė
– Valdas Vėgėlė, Commented Jul 29, 2014 at 11:38
Could someone check the code on my website (link in previous comment)? — Valdas Vėgėlė
– Valdas Vėgėlė, Commented Jul 29, 2014 at 11:39

giorgio · Accepted Answer · 2014-07-29 15:07:49Z

3

Because you've included MooTools instead of jQuery ;)

Check out this fiddle. It works when using jquery...

$('td.link').click(function() {
    $('td.button_active').removeClass('button_active');
    $('td.link').addClass('button');
    $(this).removeClass('button');
    $(this).addClass('button_active')
});

Edit

Here you go, a proper version. What I've done: put buttons inside the table cell (instead of transforming table cells into buttons), used an active class for the active button (instead of copying the button css to the active_button class), and altered the javascript a bit (less lines = nice :))

Check it out here (fiddle)

And the relevant code:

HTML

<table>
    <tr>
        <td><a href="#" class="link button active">Link One</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Two</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Three</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Four</a></td>
    </tr>
</table>

CSS

.button {
    display: block;
    width: 113px;
    height: 30px;
    text-decoration: none;
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button.svg);
    background-repeat: no-repeat;
    background-size: 138px 33px;
    border: 1px solid #e6e6e6;
    text-align: right;
    padding: 0 25px 0 0;
    font: 16px/30px 'Ubuntu';
    color: #737373;
}

.active {
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_active.svg);
    color: #ff0000;
    cursor: default
}

.button:not(.active):hover {
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_hover.svg);
    color: #000000;
}

Javascript

$('a.link').click(function(e) {
    e.preventDefault();
    $('a.active').removeClass('active');
    $(this).addClass('active')
});

Note: In a live version, don't forget to wrap your javascript in a $.ready or closure

edited Jul 29, 2014 at 15:07

answered Jul 29, 2014 at 10:45

giorgio

10.2k2 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andy Over a year ago

Why not add button to every <td> ? So you don't have to add it anymore with jquery. First <td> would become: <td class="link button button_active">Link One</td> and you can remove the unnecessary lines 3 and 4 in your code. I don't get why you would remove and add button as they all still remain buttons..

giorgio Over a year ago

Because he didn't asked ;) But you are totally right, I'll update my answer with an example.

Valdas Vėgėlė Over a year ago

Thank you Giorgio for edited code and for reminding to wrap te code :)

giorgio Over a year ago

yw ;) btw: I included the wrong js snippet before, fixed that. Included fiddle also works like it should

fed.pavlo · Accepted Answer · 2014-07-29 10:50:25Z

0

Be more accurate with libraries defined in jsfiddle. Here is what you need.

$('td.link').click(function() {
    $('td.button_active').each(function(index) {
        $(this).removeClass('button_active');
    });
    $('td.link').each(function(index) {
        $(this).addClass('button')
    });
    $(this).removeClass('button');
    $(this).addClass('button_active')
})

answered Jul 29, 2014 at 10:50

fed.pavlo

2451 silver badge9 bronze badges

Collectives™ on Stack Overflow

Change td class on click with javascript doesn't work

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related