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
    关注
    评论

报告相同问题?

悬赏问题

  • ¥17 pro*C预编译“闪回查询”报错SCN不能识别
  • ¥15 微信会员卡接入微信支付商户号收款
  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助!
  • ¥15 从键盘随机输入A-H中的一串字符串,用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母,插入认方向