单击时突出显示表格上的单元格（css / html）

Question

我正在使用php，css和javascript开发网站，并且我有一个问题，当我单击该单元格时如何突出显示该单元格（表格）？ 例如，我有一张桌子3x7，当我单击位置2x2时，该位置应以一种颜色突出显示，如果我在同一单元格中再次单击，它将返回；如果我单击了许多单元格，则所有这些都应突出显示。

提前致谢。

<table border='2' cellpadding='5' align='center'>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
    </tr>
</tbody>

Answer 1

只需使用事件委托，您可以在其中向table添加addEventListener ，然后使用事件target ，这里是e.target来检测单击了哪个td 。

然后在td上切换课程，例如高亮显示他们。

堆栈片段

 var table = document.querySelector('table'); table.addEventListener('click', function(e) { e.target.classList.toggle('highlite') }) 

 td.highlite { background: yellow } 

 <table border='2' cellpadding='5' align='center'> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> </tbody> 

Answer 2

让我们使用jQuery使其更容易

CSS：

.highlight {
  background-color: #ffff00;
}

JS：

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

小提琴： https : //jsfiddle.net/L5yuc1eg/