Vicodin� 2019-11-10 07:29 采纳率: 0%
浏览 299

如何使用jq在点击表格某一行时,让此行之前的所有行都变色

假如我点击exercise1 中的set2,我怎么样才可以让set1 和set2同时改变背景颜色?
代码如下:

<!DOCTYPE html>
<html>
<body>
<div>
    <!--exercise table here-->
    <table border="1">
        <thead>
        <tr>
            <th>Exercise</th>
            <th>Sets</th>
            <th>Reps</th>
            <th>Kg</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td rowspan="3" id="ex1">Exercise1</td>
            <td class="ex1set">1</td>
            <td>12</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="ex1set">2</td>
            <td>12</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="ex1set">3</td>
            <td>12</td>
            <td>0</td>
        </tr>
        <tr>
            <td rowspan="3" id="ex2">Exercise2</td>
            <td class="ex2set">1</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <tr>
            <td class="ex2set">2</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <tr>
            <td class="ex2set">3</td>
            <td>10</td>
            <td>10</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
    for (let i = 1; i <= 2; i++) {
        $("#ex" + i).click(function () {
            $(this).css("backgroundColor", "#99ffbb")
        });

        $(".ex"+i+"set").each(function (j, n) {
            let len = $(".ex"+i+"set").length
            $(n).click(function () {
                if (j < len - 1) {
                    $(n).css("backgroundColor", "#99ffbb")
                } else if (j >= len - 1) {
                    $("#ex"+i).css("backgroundColor", "#99ffbb")
                }
            })
        });
    }
</script>
</html>
  • 写回答

3条回答 默认 最新

  • dabocaiqq 2019-11-10 10:29
    关注
    评论

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名