纯CSS可否实现如下表格的阴影效果？

图片描述

只用CSS能否实现点了多行的checkbox，则只有最后一行显示阴影，如果点了一行则只显示那一行的阴影？

如果没法实现JS应该怎么做？

阅读 4.8k

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table, td { border: 1px solid #000; }
        tr { cursor: pointer; }
        tr.active { color: #f00; }
        tr.shadow {
            background-color: #fff;
            box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>aa</td>
        <td>11</td>
    </tr>
    <tr>
        <td>bb</td>
        <td>22</td>
    </tr>
    <tr>
        <td>cc</td>
        <td>33</td>
    </tr>
    <tr>
        <td>dd</td>
        <td>44</td>
    </tr>
    <tr>
        <td>ee</td>
        <td>55</td>
    </tr>
    <tr>
        <td>ff</td>
        <td>66</td>
    </tr>
    <tr>
        <td>gg</td>
        <td>77</td>
    </tr>
</table>
<script>
    var tr = document.querySelectorAll('tr');
    for (var i = 0, len = tr.length; i < len; i++) {
        tr[i].index = i;
        tr[i].maxLength = tr.length - 1;
        tr[i].addEventListener('click', function () {
            if (this.classList.contains('active')) {
                this.classList.remove('active', 'shadow');
                if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {
                    this.previousElementSibling.classList.add('shadow');
                }
            } else {
                this.classList.add('active');
                if (this.index === this.maxLength || !this.nextElementSibling.classList.contains('active')) {
                    this.classList.add('shadow');
                }
                if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {
                    this.previousElementSibling.classList.remove('shadow');
                }
            }
        });
    }
</script>
</body>
</html>

click = function(e){ var obj = e.currentTarget // 此处要注意target和currentTarget的区别 //然后根据obj获取到整tr（用JQ的话应该就是parent再parent了） //给tr加个class加个style就好啦 }

纯CSS可否实现如下表格的阴影效果？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

求一个可以自定义排期的日历，类似于钉钉日历？

git提交记录问题？

如何用 CSS 实现卡片顶部内凹效果？