更改表格行的css？答案

【问题标题】：Changing the css of table rows?更改表格行的css？
【发布时间】：2013-11-14 17:30:00
【问题描述】：

我正在尝试在选择一行时更改颜色/背景，就像我将其设置为悬停时一样，并且还可以取消选择该行...

如果您查看：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>

有什么想法吗？

【问题讨论】：

我已经有了悬停功能，我正在尝试让选择功能与悬停功能一起使用，请参阅 jsfiddle 代码
如果您想更改选定元素的背景/颜色，只需尝试#gradient-style tbody tr:hover td, #gradient-style tr.selected td 而不是#gradient-style tbody tr:hover, tr.selected td。见例子jsfiddle.net/q7ApN/2
背景不适用于所选元素，因为#gradient-style td 比tr.selected td 具有更大的权重。
@AleksDorohovich 我尝试将您的 jsfiddle 中的代码与我的代码合并，但不幸的是我无法让它像您的 js 一样工作......我导入的 jquery 是否正确？（我有一个版本下载到同一个文件夹中）
不是js的问题，就是css的问题。对于选定的元素，只需尝试添加权重超过 #gradient-style td 的 css 选择器。 ID总是比class更“重量”。所以，如果你想改变背景颜色（或其他属性），那么你应该使用tr.selected td 而不是#gradient-style tr.selected td。

标签： javascript jquery html css

【解决方案1】：

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

$(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/

【讨论】：

这很好用，但是我仍然无法将它合并到我的代码中，该函数在我的工作表中没有任何作用（我认为这与 jquery 导入有关）
你的 jquery 是本地的。我听起来很傻，但是路径正确吗？
我什至关注了：stackoverflow.com/questions/12332697/… 但它似乎仍然没有使用 jquery？
哦，需要先使用$(document).ready( function() {。请参阅我的编辑。我刚刚尝试在本地使用 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 作为我对 jquery 的引用，它有效
啊，非常感谢您的完美运行。绿色勾号被授予并升级:)

【解决方案2】：

试试这段代码，它会起作用的

在 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'); 
});

Fiddle

【讨论】：

感谢您的回复，但这似乎与我最初提供的代码没有什么不同。

【解决方案3】：

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

一切正常

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

});

您需要为

添加 !important

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

【讨论】：

你不应该使用 !important。
如果您有兴趣，CSS 只需要更具体，以覆盖以前的 td 样式。选择器必须是：#gradient-style tr.selected td，许多 cmets 都提到了。使用 JS 来设置样式是不好的做法，这里不需要。该类已经使用 JS 添加，这是正确的。然后就是使用新类来设置 CSS 样式了。
感谢您的建议，我对 javascript 和 jquery 非常陌生

【解决方案4】：

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

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

});

【讨论】：

嗨@sarath，不幸的是只有一半有效，它也应该做白色背景。谢谢