使用jquery addclass將css添加到表

我試圖突出顯示錶中有人點擊它時出現的一行。這裏是我的表：使用jquery addclass將css添加到表

<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> 
...

我試圖在此基礎上post一些事情：

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; 
}

出於某種原因，該行顏色沒有變化。我試着在DoNav函數中放置jquery代碼（減去點擊），它在你點擊該行時只是開始一個視頻。

我在做什麼錯。提前致謝。

來源

2013-01-18 Tom

你能提供一個小提琴嗎？我可以看到這段代碼沒有錯。 –

也許表是動態構建的？如果是這樣，你需要委託 –

也許表格單元有自己的背景，隱藏行背景？ –

關於你的CSS

table.pretty tbody td { 
    background: none repeat scroll 0 0 #eeeeee; 
    ... 
}

將所有表格單元格淺灰色。

.highlight{ 
    background-color: #a8cb17; 
}

設置突出顯示爲淺綠色背景。

您正在突出顯示行，但綠色行內的每個單元仍爲灰色，即使該行本身爲綠色。

要解決此問題，請改爲替換單元格顏色。另外注意的特殊性問題：

注意.highlight>td是不夠的，因爲.highlight>td（一個班，一個標籤）比table.pretty tbody td（一個班，三種元素）那麼具體。

來源

2013-01-18 20:02:19

感謝您的期待。我沒有意識到這一點，但仍然沒有奏效。我是否需要更改jquery以使用td而不是tr？ – Tom

@Tom特異性問題再次出現。固定。 –

輝煌！謝謝你的幫助！ – Tom

你有什麼應該工作，但不必要的複雜。下面是同一段代碼，更短：

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

這裏的小提琴：http://jsfiddle.net/gkxNa/

來源

2013-01-18 18:43:14

使用jquery addclass將css添加到表

回答

相關問題