javascript - Changing the css of table rows?

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: / 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" ".dtd">
<html xmlns="">
<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="/" 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="/" 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'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/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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./" 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./" 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?

Share edited Nov 4, 2013 at 6:23 asked Nov 4, 2013 at 5:04 Ryflex 5,77925 gold badges85 silver badges153 bronze badges

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 Commented Nov 4, 2013 at 5: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 jsfiddle/q7ApN/2 – Aleks Dorohovich Commented Nov 4, 2013 at 5:21
Background doesn't apply on selected elements because #gradient-style td has more weight than tr.selected td. – Aleks Dorohovich Commented Nov 4, 2013 at 5: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 Commented Nov 4, 2013 at 5: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 Commented Nov 4, 2013 at 5:40

| Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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/davidpauljunior/q7ApN/8/

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

http://jsfiddle/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;
}

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

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

});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Changing the css of table rows? - Stack Overflow

If Change:

To

Actual HTML:

If Change:

To

Actual HTML:

4 Answers 4

与本文相关的文章

评论列表(0)