更改表行的 css
Changing the css of table rows?
本文关键字:css 更新时间:2023-09-26
我正在尝试让它在选择一行时更改颜色/背景,就像我将其设置为悬停时一样并能够取消选择该行一样......
如果你退房: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>
有什么想法吗?
我认为这符合您的要求。 单击行时,在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/
试试这段代码它会起作用
在 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');
});
小提琴
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;
}
请检查以下链接 http://jsfiddle.net/q7ApN/3/
$("tr").click(function(){
$('.selected').removeClass('selected');
$(this).addClass("selected");
});
相关文章:
- 没有找到相关文章