Changing the css of table rows?

Question

I'm trying to make it so on selection of a row it changes the color/background just like it does when I have it set to on hover and have the ability to deselect the row aswell...

If you check out: http://jsfiddle.net/q7ApN/ you can see what it's supposed to look like on hovering...

If Change:

#gradient-style tbody tr:hover td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

To

#gradient-style tbody tr:hover, tr.selected td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

Actual HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
<!--
@import url("nstyle.css");
-->
</style>
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$("tr").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});
</script>
<div id="header_container">
    <div id="header">
        <a href="http://test.com/" target="_blank">test</a>
    </div>
</div>
<div id="container">
    <table id="gradient-style" summary="">
        <tbody>
            <thead>
                <tr>
                    <th scope="col">title</th>
                    <th scope="col">title</th>
                    <th scope="col">title</th>
                    <th scope="col">title</th>

                </tr>
            </thead>
        <tr><td>data</td><td class="test">data</td><td class="test">data</td></tr>
        <tr><td>data</td><td>data</td><td class="test">data</td></tr>
        <tr><td class="test">data</td><td class="test">data</td><td class="test">data</td></tr>
        <tr><td class="test">data</td><td class="test">data</td><td class="test">data</td></tr>
        </tbody>
    <tfoot>
        <tr>
            <td colspan=34><em>testing box :)</em></td>
        </tr>
    </tfoot>
    </table>
</div>
<div id="footer_container">
    <div id="footer">
        <a href="http://test.com/" target="_blank">test</a>
        <div id="footer1">
            <i>test.</i>
        </div>
        <div id="footer2">
            <i>test test test.</i>
        </div>  
    </div>
</div>
</body>
</html>

Any ideas?

I already have the hover function, I'm trying to get a select function to work with the hover function, see the jsfiddle code — Ryflex, Nov 04 '13 at 05:17
If you want change background/color on selected elements, just try `#gradient-style tbody tr:hover td, #gradient-style tr.selected td` instead `#gradient-style tbody tr:hover, tr.selected td`. See example http://jsfiddle.net/q7ApN/2/ — Aleks Dorohovich, Nov 04 '13 at 05:21
Background doesn't apply on selected elements because `#gradient-style td` has more weight than `tr.selected td`. — Aleks Dorohovich, Nov 04 '13 at 05:24
@AleksDorohovich I tried merging your code from your jsfiddle with my code but unfortunately I can't get it to work how your js does... is my importing of the jquery correct? (I have a version downloaded into the same folder) — Ryflex, Nov 04 '13 at 05:30
It's not js problem, just css. For selected elements just try to add css selector that has weight more than `#gradient-style td`. ID always has more "weight" than class. So, if you want change background color (or other property), then instead `tr.selected td` you should use `#gradient-style tr.selected td`. — Aleks Dorohovich, Nov 04 '13 at 05:40
I'm pretty sure it is a js problem as I have copy and pasted the exact html, css and code into my script and it doesn't work. I even tried the 3 imports from: http://stackoverflow.com/questions/12332697/whats-the-best-way-to-load-jquery — Ryflex, Nov 04 '13 at 05:51

davidpauljunior · Accepted Answer · 2013-11-04T06:01:00.663

4

I think this does what you want. Toggle the selected class on the tr when you click on a row, and also remove the selected class if you click on a sibling row.

$(document).ready( function() {
    $("tr").click(function(){
        $(this).toggleClass('selected').siblings().removeClass('selected'); 
    });
});

Then change the styles accordingly, as others have mentioned previously by using:

#gradient-style tbody tr:hover td,
#gradient-style tbody tr.selected td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

http://jsfiddle.net/davidpauljunior/q7ApN/8/

edited Nov 04 '13 at 06:01

answered Nov 04 '13 at 05:39

davidpauljunior

8,238
6
30
54

That works lovely, however I still can't merge this into my code the function does nothing in my sheets (I think it's to do with the jquery importing) – Ryflex Nov 04 '13 at 05:45
Your jquery is local. My sound silly, but is the path correct? – davidpauljunior Nov 04 '13 at 05:51
I even followed: http://stackoverflow.com/questions/12332697/whats-the-best-way-to-load-jquery but It's still not seeminly using jquery? – Ryflex Nov 04 '13 at 05:51
1

Oh need to use `$(document).ready( function() {` first. See my edit. I just tried locally using `` as my reference to jquery and it worked – davidpauljunior Nov 04 '13 at 06:00
Ahh, thank you ever so much that works perfectly. Green tick awarded and upboated :) – Ryflex Nov 04 '13 at 06:08

Sridhar R · Answer 2 · 2013-11-04T05:51:24.443

1

Try this code it will works

Change this in CSS

#gradient-style tbody tr.selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x;
        color: #339;
    }

Script

$("#gradient-style tr").click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected'); 
});

Fiddle

edited Nov 04 '13 at 05:51

answered Nov 04 '13 at 05:20

Sridhar R

20,190
6
38
35

Thanks for replying, however that doesn't seem to do anything different from the code I initially supplied. – Ryflex Nov 04 '13 at 05:31

score 1 · Answer 3 · edited May 03 '14 at 22:12

1

please check the following link http://jsfiddle.net/q7ApN/3/

$("tr").click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");

});

edited May 03 '14 at 22:12

BenMorel

34,448
50
182
322

answered Nov 04 '13 at 05:25

Sarath Babu Nuthimadugu

871
2
9
21

Hi @sarath that unfortunately only half works, it's supposed to do the white background as well. Thanks – Ryflex Nov 04 '13 at 05:31

Sarath Babu Nuthimadugu · Answer 4 · 2013-11-04T06:25:54.090

1

http://jsfiddle.net/q7ApN/7/

this is working fine

$("tr").click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");

});

you need to add !important for

 .selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x !important;
        color: #339;
}

edited Nov 04 '13 at 06:25

answered Nov 04 '13 at 05:46

Sarath Babu Nuthimadugu

871
2
9
21

2

You shouldn't use !important. – davidpauljunior Nov 04 '13 at 06:04
In case you're interested, the CSS just needed to be more specific, to override the previous td styles. The selector needed to be: `#gradient-style tr.selected td` which a number of comments mentioned. Using JS to style is bad practice and not needed here. The class had already been added using JS, which was correct. Then it's down to CSS to style using that new class. – davidpauljunior Nov 04 '13 at 06:18
thanks for suggestion i am verymuch new to javascript and jquery – Sarath Babu Nuthimadugu Nov 04 '13 at 06:20

Changing the css of table rows?

If Change:

To

Actual HTML:

4 Answers4