如何使用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个回答

weixin_44094656
Vicodin� 您好,可能是我没有表达清楚,如果我点击不规则表格Exercise1中的set2,我希望set1和set2 都变色,谢谢您
7 个月之前 回复

根据当前行号来处理啊,根据当前的行号,获取此行号之前所有的行,然后设置变色

最简单的方法,遍历,点击的时候传入当前点击的哪一个,然后它之前的都加变色class

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐