添加/删除表格数据上的类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/