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 に答える