0

当有人单击它时，我试图突出显示表中的一行。这是我的桌子：

<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 函数中，当您单击该行时，该函数只会启动一个视频。

我究竟做错了什么。提前致谢。

4

2 回答 2

3

您所拥有的应该可以工作，但是不必要地复杂。这是同一段代码，但要短得多：

var $rows = jQuery("table tr");
$rows.click(function() {
    $rows.removeClass('highlight');
    jQuery(this).addClass('highlight');
});

这是小提琴：http: //jsfiddle.net/gkxNa/

于 2013-01-18T18:43:14.567 回答
1

关于你的 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（一个类，三个元素）那么具体。

于 2013-01-18T20:02:19.310 回答