如何在单击时突出显示表格(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>

提问于
用户回答回答于

只需使用事件委托(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>

热门问答

springboot项目启动报错找不到ConfigurationPropertiesBean?

添加依赖:https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-context/2.2.0.RELEASE <!-- https://mvnrepository.com/artifac...... 展开详请

腾讯加固助手不能下载了吗?下载地址在哪里?MAC可以下载吗?我看只能在网页上加固,自己签名。?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

乐固客户端已下线,可以使用移动应用在线加固https://console.cloud.tencent.com/ms/reinforce/list

可以自行签名打渠道包。

使用jenkins配合命令进行加固,在加固过程中提示40171,起码50%的概率出现?

whileideath

腾讯 · 运营开发工程师 (已认证)

web互助开发群:953701926,禁止广告,招聘行为。
推荐
内部返回数据解析失败(查毒) 指的是在apk进行加固之前会进行病毒检测,如果检测出现病毒,违法等应用将拒绝加固。 目前是该引擎存在故障。 ... 展开详请

节点数量如何计算?

吴楠NancyWU

腾讯云 · 高级产品经理 (已认证)

腾讯云区块链产品经理,与区块链一同成长,欢迎交流
推荐

建议网络测试可使用一个组1个节点配置,根据组织多少来定测试规模;企业应用以1个组织2个节点为基础起步,保持组织内的高可用,节点数量扩展根据组织数量和交易使用量增加,一个区块链网络内建议最多不超过100个节点。谢谢您的提问

腾讯云物联网设备端 C-SDK中coap sample运行失败getaddrinfo error?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐已采纳

用coap必须打开TLS,现在云端只支持DTLS的coap连接

关于云直播的几个问题,望大佬解惑?

学生路人
推荐

1 海外单独计费

2 地址都是自己算的 可以变也可以不变

3 这个接口是拉流转推的 ,和播放不是一个东西哈 。

扫码关注云+社区

领取腾讯云代金券