javascript - 在表数据上添加/删除类 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 个主要类(指南、指南 2- 我希望它更改为的类，以及指南:悬停):

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>

你可以在我的 FIDDLE 中看到一个例子

Answer 1

您已将 click() 处理程序放在表本身上，因此当您执行 $this.closest("tr") 时，它正在寻找一个元素那是表的祖先(不是子)并且是 tr。它不会找到它。

只需将点击声明更改为

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