首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >单击时突出显示表格上的单元格(css/html)

单击时突出显示表格上的单元格(css/html)
EN

Stack Overflow用户
提问于 2018-07-08 04:09:02
回答 2查看 116关注 0票数 0

我正在使用php,css和javascript开发一个网站,我有一个问题,当我点击一个单元格(表格)时,如何突出显示它?例如,我有一个3x7的表格,当我点击位置2x2时,这个位置应该用一种颜色突出显示,如果我在同一个单元格中再次单击,它将返回,如果我单击了许多单元格,所有这些单元格都应该突出显示。

提前谢谢。

代码语言:javascript
复制
<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>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-08 04:17:47

只需使用事件委派,将一个addEventListener添加到table中,然后使用事件target,这里是e.target来检测单击了哪些td

然后在td上切换一个类,例如高亮它们。

堆栈代码段

代码语言:javascript
复制
var table = document.querySelector('table');

table.addEventListener('click', function(e) {
  e.target.classList.toggle('highlite')
})
代码语言:javascript
复制
td.highlite {
  background: yellow
}
代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-07-08 04:17:05

让我们用jQuery让它变得更简单一点

css:

代码语言:javascript
复制
.highlight {
  background-color: #ffff00;
}

js:

代码语言:javascript
复制
$('td').click(function() {
    $(this).toggleClass('highlight');
})

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

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51226622

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档