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() {

Answer 2

正如JacobM所说，你需要在细胞上使用td。

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

但是，您的表中有一个类，可以选择您想要的所有选项。这意味着您可以使用#tblContainer .guidelines代替。

$('#tblContainer .guidelines').click

我也相信这是你想要实现的目标：

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

在onclick上添加/删除表数据上的类

2 个答案: