Question

我拿到了这张桌子。我想要做的是当我点击一个单元格时它应该突出显示，然后第二次点击突出显示应该被清除。第二个问题是我想逐一突出几个单元格，保留以前的亮点。小提琴在这里：http://jsfiddle.net/2Lu3ss9g/

<table class="color_changing" border="1" cellpadding="15">
<tbody>
  <tr>
    <td>23</td>
    <td>57</td>
    <td>62</td>
    <td>1162</td>
  </tr>
  <tr>
    <td>112</td>
    <td>5</td>
    <td>162</td>
    <td>88</td>
  </tr>
  <tr>
    <td>77</td>
    <td>62</td>
    <td>199</td>
    <td>211</td>
  </tr>
     <tr>
    <td>57</td>
    <td>64</td>
     <td>144</td>
     <td>9</td>
  </tr>

</tbody>

$( function() {
$('td').click( function() {
$(this).parents('table').find('td').each( function( index, element ) {
    $(element).removeClass('on');
} );
$(this).addClass('on');
} );
} );

Answer 1

以下是使用toggleClass的简单解决方案：

$(function () {
    $('td').click(function () {
        $(this).toggleClass('highlight');
    });
});

小提琴：http://jsfiddle.net/rqeec7r4/

单击时突出显示表格单元格

1 个答案: