问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
undefinedvar
    1.7k27246305

    图片描述

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

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

    javascriptcsshtmlcss3html5
    阅读 4.8k
    2 个回答
    得票最新
    头像
    超级切图仔
      1681310
      ✓ 已被采纳
      <!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>
      头像
      Shalalala
        652316

        CSS的话应该是没法实现的，至少我没有想到什么好办法:
        倒是可以获取到选中的input

        input:checked{
    box-shadow:...;
}

        用JS方法就多了:
        点击的时候给个事件，可以

        click = function(e){
    var obj = e.currentTarget // 此处要注意target和currentTarget的区别
    //然后根据obj获取到整tr（用JQ的话应该就是parent再parent了）
    //给tr加个class加个style就好啦
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题