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

报告相同问题?

悬赏问题

  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算