2

我试图让它在选择一行时改变颜色/背景，就像我将它设置为悬停时一样，并且能够取消选择该行......

如果您查看： http: //jsfiddle.net/q7ApN/，您可以看到它在悬停时应该是什么样子......

如果改变：

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

至

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

实际 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>

有任何想法吗？

4

4 回答 4

4

我认为这可以满足您的要求。单击一行时切换selected类，tr如果单击同级行，也会删除选定的类。

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

然后相应地更改样式，正如其他人之前提到的那样，使用：

#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/

于 2013-11-04T05:39:52.050 回答
1

试试这个代码它会工作

在 CSS 中更改它

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

脚本

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

小提琴

于 2013-11-04T05:20:23.377 回答
1

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

这工作正常

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

});

你需要添加！重要的

 .selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x !important;
        color: #339;
}
于 2013-11-04T05:46:26.557 回答
1

请检查以下链接http://jsfiddle.net/q7ApN/3/

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

});
于 2013-11-04T05:25:20.803 回答