单击即可在表数据上添加/删除类

Adding/Removing classes on table data onclick

本文关键字：添加 删除 数据 单击      更新时间：2023-09-26

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

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

您已经将click()处理程序放在表本身上，所以当您执行$this.closest("tr")时，它正在寻找一个元素，该元素是表的祖先（而不是子代），并且是tr。它找不到。

只需将点击声明更改为

$('#tblContainer td').click(function() {
正如JacobM所说，您需要在单元格上使用td。

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

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

$('#tblContainer .guidelines').click

我也相信这就是你正在努力实现的目标：

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

相关文章：