添加/刪除表格數據上的類onclick

Question

我想添加一個表格單元格的類匹配懸停顏色onclick或選擇單元格。

我有這個JavaScript（這並不目前工作）：

$('#tblContainer').click(function() { 
    var $this = $(this); 

    // Remove highlight 
    $this.closest("tr").find("td.guidelines").removeClass("guidelines"); 

    // Add it to this one 
    $this.closest("td").addClass("guidelines2"); 
}); 

有了這些3個主要類別（指導方針，guidelines2-我希望它改變的類和準則：懸停）：

table.rubrictable td.guidelines { 
    background: #FFF; 
    padding: 6px; 
    text-align:left; 
    color:#666666; 
    font-size:9pt; 
    font-style:plain; 
    border-right: 1px solid #eeeeee; 
    border-left: 1px solid #eeeeee; 
    border-bottom: 2px solid #666666; 
    width:150; 
    background: #FFF; 
    background: -moz-linear-gradient(left top , #E6E6E6, #FFF); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E6E6E6), color-stop(100%,#FFF)); 
} 
table.rubrictable td.guidelines2 { 
    background: #3C0; 
    padding: 6px; 
    text-align:left; 
    color:#666666; 
    font-size:9pt; 
    font-style:plain; 
    border-right: 1px solid #eeeeee; 
    border-left: 1px solid #eeeeee; 
    border-bottom: 2px solid #666666; 
    width:150; 
} 
table.rubrictable td.guidelines:hover { 
    background:#3C0; 
} 

這裏是我的html：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblContainer" class="rubrictable"> 
    <th class="dimensionstitle">ROWS (Dimensions)</th> 
    <th class="level">Delicious<br /> 
     4</th> 
    <th class="level">Good<br /> 
     3</th> 
     <th class="level">Needs Improvement<br/
      2</th> 
     <th class="level">Poor <br /> 
      1<a href="#" title="Remove this performance level."></a> 
      </th> 
     <th class="dimensionstitle">COMMENTS</th> 
     </tr> 
    <tr> 
    <td class="dimensions" nowrap="nowrap">Number of Chips 

     &nbsp;</td> 
    <td class="guidelines">Chocolate chip in every bite</td> 
    <td class="guidelines">Chips in about 75% of bites</td> 
    <td class="guidelines">Chips in about 50% of bites</td> 
    <td class="guidelines"Too few or too many chips</td> 
    <td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td> 
    </tr> 
    <tr> 
    <td class="dimensions">Texture&nbsp;</td> 
    <td class="guidelines">Chew</td> 
    <td class="guidelines">Chewy in middle, crisp on edges</td> 
    <td class="guidelines">Texture either crispy/crunchy or 50% uncooked</td> 
    <td class="guidelines">Texture resembles a dog biscuit</td> 
    <td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td> 
    </tr> 
</table> 

而且你可以在我這裏看到一個例子

Answer 1

你放在桌子上本身的click()處理程序，所以當你$this.closest("tr")，它找了表的祖先（沒有孩子），這是一個tr的元素。它不會找到它。

只要改變點擊聲明

$('#tblContainer td').click(function() { 

Answer 2

由於JacobM說，你需要使用TD上的單元格。

$('#tblContainer td').click(function() {

然而，你的表中有所有你想成爲可選擇的選項類。這意味着您可以改用#tblContainer .guidelines。

$('#tblContainer .guidelines').click

我也相信這是你想達到什麼目的：

http://jsfiddle.net/sZenj/1/