如何在单击时突出显示表格(css/html)里的单元格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (25)

我正在开发一个使用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>

提问于
用户回答回答于

用jQuery更容易些。

CSS:

.highlight {
  background-color: #ffff00;
}

js:

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

代码:https://jsfiddle.net/L5yuc1eg/

用户回答回答于

只需使用事件委托(event delegation),在其中添加addEventListenertable,然后使用事件target,这里e.target检测哪一个td被点击了。

然后在td上切换一个类,例如highlite。

堆栈代码段

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>

扫码关注云+社区

领取腾讯云代金券