CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tableonclick
Pacane
Pacane

Reputation: 21481

Trying to bind click action on table td

I'm trying to add a click action to the cells of an html table.

Here's my Javascript : 

$(document)
    .ready(

function () {
    function setColor(cell) {
        var cssRed = {
            "color": '#ff0000'
        }
        var cssBlue = {
            "color": '#0000ff'
        }
        if (cell.css('color') == '#ff0000') cell.css(cssBlue);
        else cell.css(cssRed);
    }
    $('td').click(function () {
        setColor($(this));
    });
});

And here's my HTML

    <table style="text-align: center" border='1'>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

Which is supposed to change the color of the text within the clicked cell. I'm trying to make something similar to the grid in http://whenisgood.com

Although, for some reason, it keeps entering the else statement of the if (in the setColor method). So apparently this comparison cell.css('color') == '#ff0000' fails every time. What did I do wrong here?

edit: I made an alert of the cells.css('color') and here's the output : at first rgb(11,4,0)

and then after clicking a second time : rgb(255,0,0)

edit2: At first I tried assigning the colors as blue and red literally. However it wouldn't work (even if I was comparing with blue and red). I guess Javascript won't marshall red in Hex or RGB, right?

edit3: If you downvote, please let me know why, I'll try to update the question so it gets better.

Upvotes: 2

Views: 1497

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

I am assuming the default color of the td is red.

So just set your CSS to

td{color:#ff0000;}
td.highlight{color:#0000ff;}

and the script

$(document).ready(function () {
    function setColor(cell) {
        $(this).toggleClass('highlight');
    }
    $('td').click(setColor);
});

Demo at http://jsfiddle.net/zqytM/

Upvotes: 1

Marko
Marko

Reputation: 72222

Different browsers may return different values for colours as people have suggested.

jQuery's css() documentation confirms this.

Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

So I would suggest relying on CSS classes instead:

CSS

.red {
    color: #ff0000;
}
.blue {
    color: #0000ff;
}

jQuery

$(document)
.ready(
        function() {
            function setColor(cell){
                var shouldSwitch = cell.hasClass("red");
                cell.toggleClass("red", !shouldSwitch);
                cell.toggleClass("blue", shouldSwitch);

            }
                $('td').click(function(){
                    setColor($(this));
                  });
            });

Here's a working demo.

Upvotes: 2

Related Questions