[英]using jquery addclass to add css to table
当有人单击时,我试图突出显示表格中的一行。 这是我的桌子:
<table class="pretty">
<tr>
<td onclick="DoNav('<?php echo $url; ?>');">Name</td>
<td onclick="DoNav('<?php echo $url; ?>');">Time</td>
<td onclick="DoNav('<?php echo $url; ?>');">Size</td>
<td onclick="DoNav('<?php echo $url; ?>');">Length<td>
<td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion" /></td>
</tr>
...
我已经根据这篇文章尝试了一些方法:
jQuery("table tr").click(function(){
var row = jQuery(this);
var hasClass = row.hasClass("highlight");
jQuery("table tr").removeClass("highlight");
if(!hasClass){
row.addClass("highlight");
alert("Do I get here?");
}
});
我的CSS。 编辑 :添加了完整的CSS可能是问题所在:
table.pretty {
width: 100%;
border-collapse: collapse;
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
clear: both;
}
/* Header cells */
table.pretty thead th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}
/* Body cells */
table.pretty tbody th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
table.pretty tbody td {
background: none repeat scroll 0 0 #eeeeee;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
text-align: center;
}
table.pretty tbody tr {
cursor: pointer;
}
/* Footer cells */
table.pretty tfoot th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: left;
}
table.pretty tfoot td {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}
.highlight{
background-color: #a8cb17;
}
由于某些原因,行颜色不会更改。 我尝试将jquery代码(减去点击)放在DoNav函数中,该函数在您单击该行时才开始播放视频。
我究竟做错了什么。 提前致谢。
您拥有的东西应该可以工作,但是不必要的复杂。 这是同一段代码,更短:
var $rows = jQuery("table tr");
$rows.click(function() {
$rows.removeClass('highlight');
jQuery(this).addClass('highlight');
});
这是小提琴: http : //jsfiddle.net/gkxNa/
关于CSS
table.pretty tbody td {
background: none repeat scroll 0 0 #eeeeee;
...
}
将所有表格单元格设置为浅灰色。
.highlight{
background-color: #a8cb17;
}
将突出显示的所有内容的背景设置为浅绿色。
您正在突出显示行,但是即使行本身是绿色,绿色行中的每个单元格仍为灰色 。
要解决此问题,请改写单元格颜色。 还要提防特殊性问题:
table.pretty tbody .highlight,
table.pretty tbody .highlight > td{
background-color: #a8cb17;
}
请注意, .highlight>td
不够用,因为.highlight>td
(一类,一个标签)比table.pretty tbody td
(一类,三个元素)不够具体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.