0

我想为一个表格单元格添加一个类，该类与单击或选择单元格时的悬停颜色相匹配。

我有这个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中看到一个例子

4

2 回答 2

1

正如 JacobM 所说，您需要在单元格上使用 td 。

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

但是，您的表格有一个类别，可用于您希望可选择的所有选项。这意味着您可以#tblContainer .guidelines改用。

$('#tblContainer .guidelines').click

我也相信这是你想要达到的目标：

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

于 2013-02-22T17:29:32.040 回答
1

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

只需将点击声明更改为

$('#tblContainer td').click(function() {
于 2013-02-22T17:27:28.023 回答